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框架Express的模板视图机制分析
Jul 19 NodeJs
轻松创建nodejs服务器(10):处理上传图片
Dec 18 NodeJs
NodeJs读取JSON文件格式化时的注意事项
Sep 25 NodeJs
详解nodejs微信公众号开发——4.自动回复各种消息
Apr 11 NodeJs
详解使用nodeJs安装Vue-cli
May 17 NodeJs
使用nodeJs来安装less及编译less文件为css文件的方法
Nov 20 NodeJs
nodejs搭建本地服务器轻松解决跨域问题
Mar 21 NodeJs
nodejs 日志模块winston的使用方法
May 02 NodeJs
Nodejs把接收图片base64格式保存为文件存储到服务器上
Sep 26 NodeJs
详解从NodeJS搭建中间层再谈前后端分离
Nov 13 NodeJs
nodejs异步编程基础之回调函数用法分析
Dec 26 NodeJs
ubuntu系统下使用pm2设置nodejs开机自启动的方法
May 12 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
模板引擎smarty工作原理以及使用示例
2014/05/25 PHP
Thinkphp关闭缓存的方法
2015/06/26 PHP
CentOS下PHP7的编译安装及MySQL的支持和一些常见问题的解决办法
2015/12/17 PHP
PHP页面间传递值和保持值的方法
2016/08/24 PHP
Zend Framework常用校验器详解
2016/12/09 PHP
Smarty缓存机制实例详解【三种缓存方式】
2019/07/20 PHP
thinkPHP5框架接口写法简单示例
2019/08/05 PHP
jQuery入门问答 整理的几个常见的初学者问题
2010/02/22 Javascript
fixedBox固定div漂浮代码支持ie6以上大部分主流浏览器
2014/06/26 Javascript
在 Express 中使用模板引擎
2015/12/10 Javascript
window.onerror()的用法与实例分析
2016/01/27 Javascript
JavaScript作用域示例详解
2016/07/07 Javascript
jQuery Ajax 实现在html页面实时显示用户登录状态
2016/12/30 Javascript
解决Extjs下拉框不显示的问题
2017/06/21 Javascript
jQuery接受后台传递的List的实例详解
2017/08/02 jQuery
JS遍历JSON数组及获取JSON数组长度操作示例【测试可用】
2018/12/12 Javascript
解决antd Form 表单校验方法无响应的问题
2020/10/27 Javascript
[02:32]DOTA2英雄基础教程 祸乱之源
2013/12/23 DOTA
python实现sublime3的less编译插件示例
2014/04/27 Python
详解Django框架中用户的登录和退出的实现
2015/07/23 Python
Python Django使用forms来实现评论功能
2016/08/17 Python
详解python开发环境搭建
2016/12/16 Python
基于python进行桶排序与基数排序的总结
2018/05/29 Python
Flask框架URL管理操作示例【基于@app.route】
2018/07/23 Python
python中将正则过滤的内容输出写入到文件中的实例
2018/10/21 Python
python中下标和切片的使用方法解析
2019/08/27 Python
django使用JWT保存用户登录信息
2020/04/22 Python
使用sklearn对多分类的每个类别进行指标评价操作
2020/06/11 Python
Python 利用flask搭建一个共享服务器的步骤
2020/12/05 Python
Expedia加拿大官方网站:加拿大最大的在线旅游提供商
2017/12/31 全球购物
说说你所熟悉或听说过的j2ee中的几种常用模式?及对设计模式的一些看法
2012/05/24 面试题
焊接专业毕业生求职信
2013/10/01 职场文书
个人廉洁自律承诺书
2014/03/27 职场文书
2014年化妆品销售工作总结
2014/12/01 职场文书
解决golang在import自己的包报错的问题
2021/04/29 Golang
草系十大最强宝可梦,纸片人上榜,榜首大家最熟悉
2022/03/18 日漫