집 > 기사 > 웹 프론트엔드 > nodejs는 WS 모듈을 기반으로 WebSocket 채팅 기능을 구현합니다.

nodejs는 WS 모듈을 기반으로 WebSocket 채팅 기능을 구현합니다.

小云云원래의: 2018-05-14 16:45:454618검색

이 글에서는 WebSocket 채팅 기능을 구현하기 위한 WS 모듈 기반의 nodejs 방법을 주로 소개합니다. WebSocket 통신을 위한 WS 모듈을 사용하여 nodejs의 구체적인 작업 기술을 분석하여 필요한 친구의 형태로 채팅 기능을 구현합니다. 그것을 참조할 수 있기를 바랍니다.

WebSocket 모듈이 많아서 구현하기 더 간단한 모듈을 선택했습니다.

도구: Sublime

기술: Node.js 참조 모듈 ws

최종 효과는 다음과 같습니다

원래 네트워크 드로잉보드를 만들려고 했으나 할 일을 잊어버려서 그룹만 구현했습니다. 여기 채팅 기능

소개할 것이 없습니다. 인터넷에 코드 사례가 너무 많습니다. (초보자가 직면하는 주요 문제는 노드 가져오기 모듈의 문제일 수 있습니다.)

설치 모듈 소개:

설치 노드 디렉토리를 찾으세요. npm 디렉터리에 들어가서 cmd를 실행하고

npm install --save ws

를 입력하세요. 소스 파일은 참조할 수 있도록 npm 디렉터리에 넣어두는 것이 가장 좋습니다. (나도 초보라서 양해 부탁드립니다.)
그런 다음 노드를 실행합니다.

소스 코드: js 파일로 저장하세요

//https://github.com/websockets/ws/blob/master/doc/ws.md#new-wsserveroptions-callback
var WebSocketServer = require(&#39;ws&#39;).Server,
  wss = new WebSocketServer({
    port: 3000, //监听接口
    verifyClient: socketVerify //可选，验证连接函数
  });
function socketVerify(info) {
  console.log(info.origin);
  console.log(info.req.t);
  console.log(info.secure);
  // console.log(info.origin);
  // var origin = info.origin.match(/^(:?.+\:\/\/)([^\/]+)/);
  //if (origin.length >= 3 && origin[2] == "blog.luojia.me") {
  //  return true; //如果是来自blog.luojia.me的连接，就接受
  //}
  // console.log("连接",origin[2]);
  return true; //否则拒绝
  //传入的info参数会包括这个连接的很多信息，你可以在此处使用console.log(info)来查看和选择如何验证连接
}
//广播
wss.broadcast = function broadcast(s,ws) {
  // console.log(ws);
  // debugger;
  wss.clients.forEach(function each(client) {
    // if (typeof client.user != "undefined") {
      if(s == 1){
        client.send(ws.name + ":" + ws.msg);
      }
      if(s == 0){
        client.send(ws + "退出聊天室");
      }
    // }
  });
};
// 初始化
wss.on(&#39;connection&#39;, function(ws) {
  // console.log(ws.clients.session);
  // console.log("在线人数", wss.clients.length);
  ws.send(&#39;你是第&#39; + wss.clients.length + &#39;位&#39;);
  // 发送消息
  ws.on(&#39;message&#39;, function(jsonStr,flags) {
    var obj = eval(&#39;(&#39; + jsonStr + &#39;)&#39;);
    // console.log(obj);
    this.user = obj;
    if (typeof this.user.msg != "undefined") {
      wss.broadcast(1,obj);
    }
  });
  // 退出聊天
  ws.on(&#39;close&#39;, function(close) {
    try{
      wss.broadcast(0,this.user.name);
    }catch(e){
      console.log(&#39;刷新页面了&#39;);
    }
  });
});

html 프런트 엔드 소스 코드:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>聊天</title>
  <link rel="stylesheet" href="">
  <script language="JavaScript" src="http://code.jquery.com/jquery-1.11.0.js"></script>
  <script type="text/javascript">
  </script>
</head>
<style type="text/css" media="screen">
p {
  border: 1px solid #cccccc;
  width: 500px;
  min-height: 100px;
}
</style>
<body>
  <p id="show">
  </p>
  <input type="text" id="message" name="" value="" placeholder="">
  <input type="text" id="name" value="" placeholder="昵称;">
  <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" onclick="send()">发送</a>
  <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" onclick="exit()">退出</a>
  <!-- <input type="text" id="token" name="" value="" placeholder="" readonly="false"> -->
</body>
<script type="text/javascript">
var ws = new WebSocket("ws://127.0.0.1:3000?t=test");
ws.onopen = function() {
  console.log("连接状态", ws);
  $("#show").html("连接状态;" + ws.readyState + "</br>");
  console.log("open");
  ws.open("start");
};
ws.onmessage = function(evt) {
  // console.log(evt.data)
  // alert(evt.data);
  $("#show").append(evt.data + "</br>");
};
ws.onclose = function(evt) {
  console.log("WebSocketClosed!");
  console.log(evt);
};
ws.onerror = function(evt) {
  console.log("WebSocketError!");
};
function send() {
  var msg = $("#message").val();
  var key = $("#token").val();
  var name = $("#name").val();
  var str = "{name:&#39;" + name + "&#39;,msg:&#39;" + msg + "&#39;,key:&#39;" + key + "&#39;}";
  console.log("发送", str);
  ws.send(str);
};
function exit() {
  var r = ws.close();
  console.log("退出", r);
}
</script>
</html>

채팅에서는 별로 확인이 이루어지지 않으며 이름은 마음대로 변경할 수 있습니다.

nodejs는 WS 모듈을 기반으로 WebSocket 채팅 기능을 구현합니다.

관련 기사