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


Posted in NodeJs onJanuary 12, 2018

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

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

工具:Sublime

技术:Node.js 引用模块 ws

最终效果如下

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

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

没什么好介绍的,网上代码案例太多了,(各位新手主要碰见的问题,可能也就是 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程序设计有所帮助。

NodeJs 相关文章推荐
使用upstart把nodejs应用封装为系统服务实例
Jun 01 NodeJs
Nodejs实现的一个静态服务器实例
Dec 06 NodeJs
Jquery通过ajax请求NodeJS返回json数据实例
Nov 08 NodeJs
NodeJs下的测试框架Mocha的简单介绍
Feb 22 NodeJs
nodejs 图解express+supervisor+ejs的用法(推荐)
Sep 08 NodeJs
Nodejs+express+ejs简单使用实例代码
Sep 18 NodeJs
windows系统下更新nodejs版本的方案
Nov 24 NodeJs
nodejs基于express实现文件上传的方法
Mar 19 NodeJs
修改Nodejs内置的npm默认配置路径方法
May 13 NodeJs
nodejs前端模板引擎swig入门详解
May 15 NodeJs
NodeJs实现简易WEB上传下载服务器
Aug 10 NodeJs
nodejs+koa2 实现模仿springMVC框架
Oct 21 NodeJs
nodejs使用http模块发送get与post请求的方法示例
Jan 08 #NodeJs
nodejs基于mssql模块连接sqlserver数据库的简单封装操作示例
Jan 05 #NodeJs
Nodejs连接mysql并实现增、删、改、查操作的方法详解
Jan 04 #NodeJs
nodejs简单实现TCP服务器端和客户端的聊天功能示例
Jan 04 #NodeJs
详解NODEJS的http实现
Jan 04 #NodeJs
Nodejs中crypto模块的安全知识讲解
Jan 03 #NodeJs
nodejs+mongodb+vue前后台配置ueditor的示例代码
Jan 02 #NodeJs
You might like
SSI指令
2006/11/25 PHP
php5 pdo新改动加载注意事项
2008/09/11 PHP
smarty表格换行实例
2014/12/15 PHP
php防止网站被攻击的应急代码
2015/10/21 PHP
PHP读取大文件的几种方法介绍
2016/10/27 PHP
PHP运行模式汇总
2016/11/06 PHP
PHP基于迭代实现文件夹复制、删除、查看大小等操作的方法
2017/08/11 PHP
PHP实现的数据对象映射模式详解
2019/03/20 PHP
WEB 浏览器兼容 推荐收藏
2010/05/14 Javascript
IE8提示Invalid procedure call or argument 异常的解决方法
2012/09/30 Javascript
JAVASCRIPT函数作用域和提前声明 分享
2013/08/22 Javascript
利用jQuary实现文字浮动提示效果示例代码
2013/12/26 Javascript
Nodejs sublime text 3安装与配置
2014/06/19 NodeJs
jquery编写Tab选项卡滚动导航切换特效
2020/07/17 Javascript
vue+ElementUI实现订单页动态添加产品数据效果实例代码
2017/07/13 Javascript
vue中SPA单页面应用程序详解
2017/11/07 Javascript
Vue二次封装axios为插件使用详解
2018/05/21 Javascript
对angularJs中$sce服务安全显示html文本的实例
2018/09/30 Javascript
详解用场景去理解函数柯里化(入门篇)
2019/04/11 Javascript
深入浅析vue-cli@3.0 使用及配置说明
2019/05/08 Javascript
no-vnc和node.js实现web远程桌面的完整步骤
2019/08/11 Javascript
解决Layui 表格自适应高度的问题
2019/11/15 Javascript
python 接口实现 供第三方调用的例子
2019/08/13 Python
Python统计分析模块statistics用法示例
2019/09/06 Python
手机使用python操作图片文件(pydroid3)过程详解
2019/09/25 Python
解决启动django,浏览器显示“服务器拒绝访问”的问题
2020/05/13 Python
Python批量获取并保存手机号归属地和运营商的示例
2020/10/09 Python
Skip Hop官网:好莱坞宝宝挚爱品牌
2018/06/17 全球购物
STAY JAPAN台湾:预订日本民宿
2018/07/22 全球购物
Bibloo荷兰:女士、男士和儿童的服装、鞋子和配饰
2019/02/25 全球购物
Napapijri西班牙在线商店:夹克、外套、运动衫等
2020/11/05 全球购物
工程地质勘察专业大学生求职信
2013/10/13 职场文书
简历中求职的个人自我评价
2013/12/03 职场文书
简易离婚协议书范本
2014/10/24 职场文书
小学重阳节活动总结
2015/03/24 职场文书
Python使用OpenCV和K-Means聚类对毕业照进行图像分割
2021/06/11 Python