nodejs implements WebSocket chat function based on WS module-JS Tutorial-php.cn

nodejs implements WebSocket chat function based on WS module

小云云

Release： 2018-05-14 16:45:45

Original

4616 people have browsed it

This article mainly introduces the method of nodejs to implement the WebSocket chat function based on the WS module. It analyzes the specific operation skills of nodejs using the WS module for WebSocket communication to implement the chat function in the form of examples. Friends who need it can refer to it. I hope it can help everyone. .

There are many WebSocket modules, and I chose a simpler module to implement.

Tool: Sublime

Technology: Node.js Reference module ws

The final effect is as follows

Originally planned to make Network drawing board, I forgot about it due to work, so here I simply implement the group chat function

There is nothing to introduce, there are too many code cases on the Internet, (the main problem encountered by novices may be the problem of node import module )

Introduce the installation module:

Find the installation node directory, enter the npm directory, run cmd and enter the

npm install --save ws

Copy after login

source file, it is best to place it in the npm directory. You can quote it (I am also a novice, please forgive me)
Then execute the node source file.js and you can access it;

Source code: Just save it as a js file

//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;);
    }
  });
});

Copy after login

html Front-end source code:

<!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>

Copy after login

There is not much verification in the chat, the name can be changed at will,

Related recommendations:

js original sound to implement simple WeChat Chat function

node.js + socket.io Detailed explanation of chat function

How to use nodejs to implement chat function

The above is the detailed content of nodejs implements WebSocket chat function based on WS module. For more information, please follow other related articles on the PHP Chinese website!