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 Express4.x开发框架随手笔记
Nov 23 NodeJs
Nodejs下用submit提交表单提示cannot post错误的解决方法
Nov 21 NodeJs
Highcharts+NodeJS搭建数据可视化平台示例
Jan 01 NodeJs
Nodejs+Socket.io实现通讯实例代码
Feb 13 NodeJs
NodeJs测试框架Mocha的安装与使用
Mar 28 NodeJs
nodejs服务搭建教程 nodejs访问本地站点文件
Apr 07 NodeJs
Nodejs把接收图片base64格式保存为文件存储到服务器上
Sep 26 NodeJs
NodeJs 文件系统操作模块fs使用方法详解
Nov 26 NodeJs
nodejs微信开发之接入指南
Mar 17 NodeJs
Nodejs监控事件循环异常示例详解
Sep 22 NodeJs
nodejs实现百度舆情接口应用示例
Feb 07 NodeJs
nodejs中的异步编程知识点详解
Jan 17 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
ADODB的数据库封包程序库
2006/12/31 PHP
PHP中基于ts与nts版本- vc6和vc9编译版本的区别详解
2013/04/26 PHP
十个PHP高级应用技巧果断收藏
2015/09/25 PHP
在laravel5.2中实现点击用户头像更改头像的方法
2019/10/14 PHP
Avengerls vs KG BO3 第二场2.18
2021/03/10 DOTA
JavaScript中为什么null==0为false而null大于=0为true(个人研究)
2013/09/16 Javascript
Document.location.href和.replace的区别示例介绍
2014/03/04 Javascript
原生JS实现仿淘宝网左侧商品分类菜单效果代码
2015/09/10 Javascript
jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)
2016/04/08 Javascript
深入浅析JavaScript的API设计原则
2016/06/14 Javascript
vue使用xe-utils函数库的具体方法
2018/03/06 Javascript
浅谈在react中如何实现扫码枪输入
2018/07/04 Javascript
vue+web端仿微信网页版聊天室功能
2019/04/30 Javascript
vue 中的动态传参和query传参操作
2020/11/09 Javascript
[04:09]2014DOTA2国际邀请赛Ti西雅图 历届冠军相继出局 BBC综述今日比赛
2014/07/20 DOTA
Python 爬虫学习笔记之正则表达式
2016/09/21 Python
Python实现网站注册验证码生成类
2017/06/08 Python
Python使用pyserial进行串口通信的实例
2019/07/02 Python
python3的数据类型及数据类型转换实例详解
2019/08/20 Python
Django之使用内置函数和celery发邮件的方法示例
2019/09/16 Python
Tensorflow Summary用法学习笔记
2020/01/10 Python
tensorflow多维张量计算实例
2020/02/11 Python
django中related_name的用法说明
2020/05/20 Python
python实现文法左递归的消除方法
2020/05/22 Python
Css3新特性应用之视觉效果实例
2016/12/12 HTML / CSS
保险公司晨会主持词
2014/03/22 职场文书
竞选卫生委员演讲稿
2014/04/28 职场文书
小露珠教学反思
2014/04/30 职场文书
保密工作整改报告
2014/11/06 职场文书
优秀团队申报材料
2014/12/26 职场文书
答谢词范文
2015/01/05 职场文书
2015年第十五个全民国防教育日宣传活动方案
2015/05/06 职场文书
学校2016年九九重阳节活动总结
2016/04/01 职场文书
Javascript中的解构赋值语法详解
2021/04/02 Javascript
详解Python中的进程和线程
2021/06/23 Python
JUnit5常用注解的使用
2021/07/02 Java/Android