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 相关文章推荐
基于NodeJS的前后端分离的思考与实践(一)全栈式开发
Sep 26 NodeJs
Windows 系统下设置Nodejs NPM全局路径
Apr 26 NodeJs
nodejs实现发出蜂鸣声音(系统报警声)的方法
Jan 18 NodeJs
NodeJS实现微信公众号关注后自动回复功能
May 31 NodeJs
NodeJs实现定时任务的示例代码
Dec 05 NodeJs
Nodejs调用Dll模块的方法
Sep 17 NodeJs
NodeJS服务器实现gzip压缩的示例代码
Oct 12 NodeJs
nodejs图片处理工具gm用法小结
Dec 12 NodeJs
nodejs中request库使用HTTPS代理的方法
Apr 30 NodeJs
nodejs读取图片返回给浏览器显示
Jul 25 NodeJs
Nodejs中使用puppeteer控制浏览器中视频播放功能
Aug 26 NodeJs
NodeJS有难度的面试题(能答对几个)
Oct 09 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
PHP压缩html网页代码(清除空格,换行符,制表符,注释标记)
2012/04/02 PHP
彻底删除thinkphp3.1案例blog标签的方法
2014/12/05 PHP
PHP内核探索:哈希表碰撞攻击原理
2015/07/31 PHP
推荐:极酷右键菜单
2006/11/29 Javascript
被jQuery折腾得半死,揭秘为何jQuery为何在IE/Firefox下均无法使用
2010/01/22 Javascript
Array.prototype.concat不是通用方法反驳[译]
2012/09/20 Javascript
Javascript基础教程之关键字和保留字汇总
2015/01/18 Javascript
javascript self对象使用详解
2016/10/18 Javascript
Js判断H5上下滑动方向及滑动到顶部和底部判断的示例代码
2017/11/15 Javascript
使用Vue写一个datepicker的示例
2018/01/27 Javascript
Webpack中publicPath路径问题详解
2018/05/03 Javascript
jquery引入外部CDN 加载失败则引入本地jq库
2018/05/23 jQuery
「中高级前端面试」JavaScript手写代码无敌秘籍(推荐)
2019/04/08 Javascript
JavaScript正则表达式验证登录实例
2020/03/18 Javascript
javascript使用Blob对象实现的下载文件操作示例
2020/04/18 Javascript
浅谈Python的异常处理
2016/06/19 Python
python 类详解及简单实例
2017/03/24 Python
Python数据结构与算法之图的广度优先与深度优先搜索算法示例
2017/12/14 Python
Python中getpass模块无回显输入源码解析
2018/01/11 Python
Python操作Oracle数据库的简单方法和封装类实例
2018/05/07 Python
pycharm下查看python的变量类型和变量内容的方法
2018/06/26 Python
python 使用re.search()筛选后 选取部分结果的方法
2018/11/28 Python
Python任意字符串转16, 32, 64进制的方法
2019/06/12 Python
Django框架HttpResponse对象用法实例分析
2019/11/01 Python
python中的RSA加密与解密实例解析
2019/11/18 Python
canvas离屏技术与放大镜实现代码示例
2018/08/31 HTML / CSS
美国家喻户晓的保健品品牌:Vitamin World(维他命世界)
2016/08/19 全球购物
彪马美国官网:PUMA美国
2017/03/09 全球购物
Bibloo罗马尼亚网站:女装、男装、童装及鞋子和配饰
2019/07/20 全球购物
工商管理专业实习生自我鉴定
2013/09/29 职场文书
社区庆八一活动方案
2014/02/02 职场文书
初中生期末评语大全
2014/04/24 职场文书
2014党员四风对照检查材料思想汇报
2014/09/17 职场文书
幼儿园辞职书
2015/02/26 职场文书
傲慢与偏见读书笔记
2015/06/29 职场文书
发言稿之优秀教师篇
2019/09/26 职场文书