基于Node.js的WebSocket通信实现


Posted in Javascript onMarch 11, 2017

node的依赖包

node中实现Websocket的依赖包有很多,websocket、ws均可,本文选取ws来实现,首先安装依赖

npm install ws

聊天室实例

假如A,B,C,D用户均通过客户端连接到Websocket服务,其中每个人发的消息都需要将其通过Websocket转发给其他人,此场景类似于服务端将A的消息广播给组内其他用户。

服务端实现

首先来看服务端程序,具体的工作流程分以下几步:

  1. 创建一个WebSocketServer的服务,同时监听8080端口的连接请求。
  2. 每当有新的客户端连接该WebSocket成功时,便将该连接push到连接池的数组中。
  3. 监听message事件,当该事件发生时,遍历连接池,以连接为单位将该消息转发到对应的客户端
  4. 监听close事件,当该事件发生时,将该连接移出连接池

服务端代码

var WebSocketServer = require('ws').Server,
  wss = new WebSocketServer({port: 8080});

// 连接池
var clients = [];

wss.on('connection', function(ws) {
  // 将该连接加入连接池
  clients.push(ws);
  ws.on('message', function(message) {
    // 广播消息
    clients.forEach(function(ws1){
      if(ws1 !== ws) {
        ws1.send(message);
      }
    })
  });

  ws.on('close', function(message) {
    // 连接关闭时,将其移出连接池
    clients = clients.filter(function(ws1){
      return ws1 !== ws
    })
  });
});

客户端实现

<html>
<input type="text" id="text">
<input type="button" onclick="sendMessage()" value="online">
<script>
  var ws = new WebSocket("ws://localhost:8080");

  ws.onopen = function (e) {
    console.log('Connection to server opened');
  }
  ws.onmessage = function(event) { 
    console.log('Client received a message', event); 
  }; 
  ws.onclose = function (e) {
    console.log('connection closed.');
  }
  function sendMessage() {
      ws.send(document.getElementById('text').value);
  }
</script>
</html>

如何发现用户?

通过上述的demo可以看到,WebSocket都是基于连接的,也就是说我们知道data是从那个connection发过来,但并不知道使用客户端的是李雷或者韩梅梅,这可如何是好?再想另一种场景,李雷只想给韩梅梅发消息,不想将消息广播给其他客户端,此时我们就需要在Server端能够标识用户身份和连接的对应关系。

于是,需要在客户端连接到WebSocket之后,紧接着再发一次请求,告诉Server我的user_id是多少,Server将此user_id与connection之间的关系存储在hashmap中,至此就建立了user_id与connection的对应关系。当需要发送消息给对应的客户端,从此hashmap中取出对应用户的connection信息,调用其send方法发出消息即可。

依赖包

npm install hashmap

服务端实现

var WebSocketServer = require('ws').Server, webSocketServer = new WebSocketServer({port: 8080});
var HashMap = require('hashmap');

// record the client
var userConnectionMap = new HashMap();
var connectNum = 0;

// connection
webSocketServer.on('connection', function(ws) {
  ++ connectNum;
  console.log('A client has connected. current connect num is : ' + connectNum);
  ws.on('message', function(message) {
    var objMessage = JSON.parse(message);
    var strType = objMessage['type'];

    switch(strType) {
      case 'online' : 
        userConnectionMap.set(objMessage['from'], ws);
        break;
      default:
        var targetConnection = userConnectionMap.get(objMessage['to']);
        if (targetConnection) {
          targetConnection.send(message);
        }
    }
  });

  ws.on('close', function(message) {
    var objMessage = JSON.parse(message);
    userConnectionMap.remove(objMessage['from']);
  });
});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript读取xml
Nov 04 Javascript
验证手机号码的JS方法分享
Sep 10 Javascript
js判断ie版本号的简单实现代码
Mar 05 Javascript
JavaScript 浏览器对象模型BOM使用介绍
Apr 13 Javascript
一不小心就做错的JS闭包面试题
Nov 25 Javascript
js判断鼠标位置是否在某个div中的方法
Feb 26 Javascript
微信js-sdk地理位置接口用法示例
Oct 12 Javascript
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
Oct 12 Javascript
基于JS开发微信网页录音功能的实例代码
Apr 30 Javascript
使用VueCli3+TypeScript+Vuex一步步构建todoList的方法
Jul 25 Javascript
js 获取本周、上周、本月、上月、本季度、上季度的开始结束日期
Feb 01 Javascript
vue-openlayers实现地图坐标弹框效果
Sep 24 Javascript
js原生Ajax的封装和原理详解
Mar 11 #Javascript
ThinkPHP+jquery实现“加载更多”功能代码
Mar 11 #Javascript
Bootstrap的Carousel配合dropload.js实现移动端滑动切换图片
Mar 10 #Javascript
基于Bootstrap框架实现图片切换
Mar 10 #Javascript
angularjs ui-router中路由的二级嵌套
Mar 10 #Javascript
AngularJS ui-router (嵌套路由)实例
Mar 10 #Javascript
微信小程序手势操作之单触摸点与多触摸点
Mar 10 #Javascript
You might like
ajax实现无刷新分页(php)
2010/07/18 PHP
php中一个有意思的日期逻辑处理
2012/03/25 PHP
php向js函数传参的几种方法
2014/08/10 PHP
php使用ob_start()实现图片存入变量的方法
2014/11/14 PHP
MacOS 安装 PHP的图片裁剪扩展Tclip
2015/03/25 PHP
PHP file_get_contents函数读取远程数据超时的解决方法
2015/05/13 PHP
Symfony2创建基于域名的路由相关示例
2016/11/14 PHP
Laravel实现定时任务的示例代码
2017/08/10 PHP
解决tp5在nginx下修改配置访问的问题
2019/10/16 PHP
详解laravel passport OAuth2.0的4种模式
2019/11/04 PHP
关于js里的this关键字的理解
2015/08/17 Javascript
基于jQuery实现的无刷新表格分页实例
2016/02/17 Javascript
HTML页面,测试JS对C函数的调用简单实例
2016/08/09 Javascript
js基础之DOM中元素对象的属性方法详解
2016/10/28 Javascript
详解AngularJs HTTP响应拦截器实现登陆、权限校验
2017/04/11 Javascript
JS定义函数的几种常用方法小结
2019/05/23 Javascript
vue-router的两种模式的区别
2019/05/30 Javascript
基于vue-draggable 实现三级拖动排序效果
2020/01/10 Javascript
详解Python的Lambda函数与排序
2016/10/25 Python
python入门教程之识别验证码
2017/03/04 Python
python实现坦克大战游戏 附详细注释
2020/03/27 Python
Python内置random模块生成随机数的方法
2019/05/31 Python
pytorch实现从本地加载 .pth 格式模型
2020/02/14 Python
Python实现数字的格式化输出
2020/08/01 Python
Django中的DateTimeField和DateField实现
2021/02/24 Python
char型变量中能不能存贮一个中文汉字
2015/07/08 面试题
商务英语专业应届毕业生求职信
2013/10/28 职场文书
预备党员转正思想汇报
2014/01/12 职场文书
火锅店营销方案
2014/02/26 职场文书
股东协议书
2014/04/14 职场文书
结婚保证书范文
2014/04/29 职场文书
优秀语文教师事迹
2014/05/18 职场文书
防灾减灾日活动总结
2014/08/26 职场文书
好媳妇事迹材料
2014/12/24 职场文书
教师文明餐桌光盘行动倡议书
2015/04/28 职场文书
冰雪公主观后感
2015/06/16 职场文书