nodejs基于WS模块实现WebSocket聊天功能的方法

更新时间：2018年01月12日 11:47:43 作者：空白的画

这篇文章主要介绍了nodejs基于WS模块实现WebSocket聊天功能的方法,结合实例形式分析了nodejs使用WS模块进行WebSocket通信实现聊天功能的具体操作技巧,需要的朋友可以参考下

本文实例讲述了nodejs基于WS模块实现WebSocket聊天功能的方法。分享给大家供大家参考，具体如下：

WebSocket 模块众多，我选择了一个较为简单的模块进行了实现。

工具：Sublime

技术：Node.js 引用模块 ws

最终效果如下

本来打算制作网络画板，因为工作忘记了，这里就简单实现了群聊功能

没什么好介绍的，网上代码案例太多了，（各位新手主要碰见的问题，可能也就是 node 导入模块问题了）

介绍一下安装模块：

找到安装node 目录，进入到 npm 目录下运行 cmd 输入

npm install --save ws

源文件呢，最好放在 npm 目录下，就可以引用到了（我也是新手各位见谅）
然后执行 node 源文件.js 就可以访问了呢；

源码：保存成js 文件就可以了

//https://github.com/websockets/ws/blob/master/doc/ws.md#new-wsserveroptions-callback
var WebSocketServer = require('ws').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('connection', function(ws) {
  // console.log(ws.clients.session);
  // console.log("在线人数", wss.clients.length);
  ws.send('你是第' + wss.clients.length + '位');
  // 发送消息
  ws.on('message', function(jsonStr,flags) {
    var obj = eval('(' + jsonStr + ')');
    // console.log(obj);
    this.user = obj;
    if (typeof this.user.msg != "undefined") {
      wss.broadcast(1,obj);
    }
  });
  // 退出聊天
  ws.on('close', function(close) {
    try{
      wss.broadcast(0,this.user.name);
    }catch(e){
      console.log('刷新页面了');
    }
  });
});

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">
div {
  border: 1px solid #cccccc;
  width: 500px;
  min-height: 100px;
}
</style>
<body>
  <div id="show">
  </div>
  <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:'" + name + "',msg:'" + msg + "',key:'" + key + "'}";
  console.log("发送", str);
  ws.send(str);
};
function exit() {
  var r = ws.close();
  console.log("退出", r);
}
</script>
</html>

聊天中没有做太多验证，名字可以随意改动，

参考

https://github.com/websockets/ws

https://github.com/websockets/ws/blob/master/doc/ws.md

希望本文所述对大家nodejs程序设计有所帮助。

您可能感兴趣的文章:

Node.js本地搭建简单页面小游戏的过程
Node.js是能够在服务器端运行 JavaScript 的开放源代码、跨平台运行环境,Node.js 大部分基本模块都用 JavaScript 语言编写,下面将介绍如何简单几步实现远程公共网络下访问windwos node.js的服务端
2024-01-01
nodejs中fs模块三种读写文件方法的使用区别
Node.js的fs模块有多种文件操作API,readFile、read、createReadStream读取文件,writeFile、write、createWriteStream写入文件,readFile和writeFile将文件写入缓存区,适合小文件操作,read和write分步骤读写,适合大文件,createReadStream和createWriteStream通过流处理文件
2024-10-10
Node中解决接口跨域问题详解
在 Node 中编写接口时，我们常常会遇到跨域问题，通过本篇文章，我们来聊聊如何解决 Node 中接口的跨域问题，文中代码示例介绍了非常详细，需要的朋友可以借鉴一下
2023-04-04
深入浅析Nodejs的Http模块
我们知道传统的HTTP服务器是由Aphche、Nginx、IIS之类的软件来搭建的，但是Nodejs并不需要，Nodejs提供了http模块，自身就可以用来构建服务器，下面通过本文给大家介绍Nodejs的Http模块，需要的的朋友参考下吧
2017-06-06
Nodejs Socket连接池及TCP HTTP网络模型详解
这篇文章主要为大家介绍了Nodejs Socket连接池及TCP HTTP网络模型,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-08-08
nodejs教程之异步I/O
nodejs的核心之一就是非阻塞的异步IO，于是想知道它是怎么实现的，经过一份研究，找到些答案，在此跟大家分享下。
2014-11-11
Node.js笔记之process模块解读
这篇文章主要介绍了Node.js process模块解读，process存在于全局对象上，不需要使用require()加载即可使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-05-05
node文件资源管理器的图片预览从零实现
这篇文章主要为大家介绍了node文件资源管理器的图片预览从零实现示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-12-12
详解nodejs实现本地上传图片并预览功能（express4.0+）
本篇文章主要介绍了nodejs实现本地上传图片并预览功能（express4.0+），具有一定的参考价值，有兴趣的可以了解一下
2017-06-06
node.js不得不说的12点内容
本文主要是分享下，个人对node.js的一些认识和理解，希望对大家有所帮助
2014-07-07

nodejs基于WS模块实现WebSocket聊天功能的方法

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具