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 相关文章推荐
Google官方支持的NodeJS访问API,提供后台登录授权
Jul 29 NodeJs
详解Nodejs之静态资源处理
Jun 05 NodeJs
用nodejs实现json和jsonp服务的方法
Aug 25 NodeJs
nodejs async异步常用函数总结(推荐)
Nov 17 NodeJs
nodejs 使用nodejs-websocket模块实现点对点实时通讯
Nov 28 NodeJs
NVM安装nodejs的方法实用步骤
Jan 16 NodeJs
Nodejs中的require函数的具体使用方法
Apr 02 NodeJs
nodejs文件夹深层复制功能
Sep 03 NodeJs
纯异步nodejs文件夹(目录)复制功能
Sep 03 NodeJs
NodeJS 文件夹拷贝以及删除功能
Sep 03 NodeJs
nodejs环境使用Typeorm连接查询Oracle数据
Dec 05 NodeJs
NodeJS配置CORS实现过程详解
Dec 02 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 全文搜索和替换的实现代码
2008/07/29 PHP
PHP仿微信发红包领红包效果
2016/10/30 PHP
PHP实现类似于C语言的文件读取及解析功能
2017/09/01 PHP
laravel添加前台跳转成功页面示例
2019/10/22 PHP
手机端网页点击链接触发自动拨打或保存电话的示例代码
2014/08/15 Javascript
javascript中setInterval的用法
2015/07/19 Javascript
jquery点击缩略图切换视频播放特效代码分享
2015/09/15 Javascript
Node.js编写组件的三种实现方式
2016/02/25 Javascript
JavaScript使ifram跨域相互访问及与PHP通信的实例
2016/03/03 Javascript
设计模式中的组合模式在JavaScript程序构建中的使用
2016/05/18 Javascript
在javascript中使用com组件的简单实现方法
2016/08/17 Javascript
Javascript 获取鼠标当前的位置实现方法
2016/10/27 Javascript
完美解决mui框架off-canvas侧滑超出部分隐藏无法滚动的问题
2018/01/25 Javascript
mpvue写一个CPASS小程序的示例
2018/09/04 Javascript
在Angular中使用JWT认证方法示例
2018/09/10 Javascript
javascript中的event loop事件循环详解
2018/12/14 Javascript
JavaScript函数式编程(Functional Programming)高阶函数(Higher order functions)用法分析
2019/05/22 Javascript
element中el-container容器与div布局区分详解
2020/05/13 Javascript
ant-design表单处理和常用方法及自定义验证操作
2020/10/27 Javascript
[14:56]教你分分钟做大人:巫医
2014/10/30 DOTA
python基于ID3思想的决策树
2018/01/03 Python
分析Python中解析构建数据知识
2018/01/20 Python
Django学习笔记之ORM基础教程
2018/03/27 Python
Flask模板引擎之Jinja2语法介绍
2019/06/26 Python
在django admin中添加自定义视图的例子
2019/07/26 Python
使用python的turtle绘画滑稽脸实例
2019/11/21 Python
Python实现投影法分割图像示例(二)
2020/01/17 Python
解决python调用自己文件函数/执行函数找不到包问题
2020/06/01 Python
python一些性能分析的技巧
2020/08/30 Python
Python类的继承super相关原理解析
2020/10/22 Python
英格兰橄榄球商店:England Rugby Store
2016/12/17 全球购物
实习生的自我评价
2014/01/08 职场文书
工程安全员岗位职责
2014/03/09 职场文书
环境监测与治理技术专业求职信
2014/07/06 职场文书
美术课外活动总结
2014/07/08 职场文书
迎国庆主题班会
2015/08/17 职场文书