node.js + socket.io 实现点对点随机匹配聊天


Posted in Javascript onJune 30, 2017

真心佩服那些可以经常发布笔记的人,其实我也想经常发来的,奈何技术不够加上懒,要向大神们多多学习了,前段时间有用bomb平台自带的socket写一个聊天室,其实基本就是改了改它的demo,这次想实现一个随机私聊,所以自己基于node 和 socket.io 来搭服务,当然,第一次用node做东西玩,虽然做的不好,但是也蛮分享下哈。

先说说用到的东西, node 用来做后台服务,express 用来托管静态资源,然后socket.io 用来传送聊天数据。接下来说说思路,其实用socket.io来传数据是很简单的一件事情,我们只需要再前端页面引入 socket.io.js  然后再node端也require('socket.io'),把它在后端跑起来,那么前端就可以通过如下代码来发送或者接收信息。

//前端
socket = io.connect('ws://'+'服务器ip');
socket.emit('msg',{msg:'前端要发送的信息'});//要发送的信息(以对象的形式发送)
socket.on('msg2',function(data){
  ...
  //这里的data是后端传过来的信息
})
//后端
socket.on('msg',function(data){
  var data = data; //这里的data就是前端传过来的数据,即{msg:'前端要发送的信息'}
  console.log(data.msg) // 打印出 “前端要发送的信息”
})
//同理,后端要传信息给前端也是一样
socket.emit('msg2',{msg:'后端要发送的信息'});

我们来看后端怎么把socket跑起来

var express = require('express');
var app = express();
var http = require('http').Server(app);
var io = require('socket.io')(http);
io.on('connection', function(socket){ //当前端执行 socket = io.connect('ws://'+host); 的时候,此处的io会监听到connection事件
 socket.on('msg',function(data){ 
 io.emit('onlineCount',freeList)
 //如果直接用io.emit来发送数据的话,这代表广播的形式,就是当前所有打开服务的前端页面都会收到这条消息。
 
   socket.emit('welcome',{msg:'欢迎...'})//这里将给当前连接的页面发送一个欢迎的对象数据
 })
 socket.on('disconnect',function(){
 //当前端页面关闭,或者失去连接时,后端会接收到disconnect事件
   
 })

})
http.listen(4000, function(){
 console.log('listening on *:4000');
});

当然不仅如此,因为websocket协议,是在浏览器和服务器之间建立了一个长链接来相互传输数据,对服务器而言,如果打开了好几个页面,那么就有好几个socket实例,每个建立连接的前端页面都会有一个socket实例,这样就为接下来的点对点私聊提供了思路。当然,我们也可以通过直接广播来传送信息,不过这适用于聊天室情景。

那如何实现点对点呢,之前说了,每个建立连接的页面都会产生一个socket实例,那么我们只需要后端在接收消息的同时,判断该socket实例是和哪个个实例在聊天,只把消息发送给另一个匹配的socket实例就好了。简单来说就像写信一样,我把消息发送给后端,然后告诉后端,这个消息是给xxx的,然后后端找到xxx对应的socket实例,将消息发给他就好了。

//前端
window.id = new Date().getTime()+""+Math.floor(Math.random()*899+100);
//每次登录,获取一个唯一的用户id
socket = io.connect('ws://'+host);
socket.emit('newUser',{ user_name : name, user_id : id})
//建立连接后,将我的用户名和id都传给后端

//后端
socket.on('newUser',function(data){
 var nickname = data.user_name,
  user_id = data.user_id;
 userServer[user_id] = socket;
 //后端接收后,将该用户socket保存在一个对象里,key值为id,value就是这个用户的socket
  
})

通过上面的代码,后端得到了一个userServer的对象,里面是每个连接socket和其id的对应值,这样,就可以通过每次发送信息时,附带要接收对象的id来达到点对点的数据传输。

接下来就是数据处理咯,如何取到对方的id啊等等,鉴于我表达能力有限,加上懒,就不??吕?~ 代码我都托管在github欢迎自己下下来看咯~https://github.com/mikoshu/mychatroom.git

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

Javascript 相关文章推荐
解决jquery异步按一定的时间间隔刷新问题
Dec 10 Javascript
jquery mobile事件多次绑定示例代码
Sep 13 Javascript
JS连连看源码完美注释版(推荐)
Dec 09 Javascript
JS实现窗口加载时模拟鼠标移动的方法
Jun 03 Javascript
JS中多步骤多分步的StepJump组件实例详解
Apr 01 Javascript
Bootstrap教程JS插件弹出框学习笔记分享
May 17 Javascript
javascript比较语义化版本号的实现代码
Sep 09 Javascript
基于jquery实现二级联动效果
Mar 30 jQuery
使用JavaScript实现在页面中显示距离2017年中秋节的天数
Sep 26 Javascript
React 组件间的通信示例
Jun 14 Javascript
vue 中的keep-alive实例代码
Jul 20 Javascript
vue使用nprogress加载路由进度条的方法
Jun 04 Javascript
详解vue中computed 和 watch的异同
Jun 30 #Javascript
JS 组件系列之Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
Jun 30 #Javascript
vue2.0 axios前后端数据处理实例代码
Jun 30 #Javascript
JS 组件系列之Bootstrap Table的冻结列功能彻底解决高度问题
Jun 30 #Javascript
MUI实现上拉加载和下拉刷新效果
Jun 30 #Javascript
js实现京东轮播图效果
Jun 30 #Javascript
jquery实现一个全局计时器(商城可用)
Jun 30 #jQuery
You might like
10个对初学者非常有用的PHP技巧
2016/04/06 PHP
PHP读书笔记整理_结构语句详解
2016/07/01 PHP
jQuery之按钮组件的深入解析
2013/06/19 Javascript
javascript实现tab切换特效
2015/11/12 Javascript
jQuery插件之jQuery.Form.js用法实例分析(附demo示例源码)
2016/01/04 Javascript
js console.log打印对像与数组用法详解
2016/01/21 Javascript
深入剖析javascript中的exec与match方法
2016/05/18 Javascript
JavaScript实现的搜索及高亮显示功能示例
2017/08/14 Javascript
AngularJS实现表单验证功能详解
2017/10/12 Javascript
vue 实现剪裁图片并上传服务器功能
2018/03/01 Javascript
详解webpack+ES6+Sass搭建多页面应用
2018/11/05 Javascript
Node.js之删除文件夹(含递归删除)代码实例
2019/09/09 Javascript
[02:53]DOTA2亚洲邀请赛 NewBee战队巡礼
2015/02/03 DOTA
[01:10:02]IG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python生成器的使用方法
2013/11/21 Python
简单的Python抓taobao图片爬虫
2014/10/26 Python
python使用paramiko实现远程拷贝文件的方法
2016/04/18 Python
浅谈Python生成器generator之next和send的运行流程(详解)
2017/05/08 Python
Python基于回溯法子集树模板解决找零问题示例
2017/09/11 Python
Python实现将多个空格换为一个空格.md的方法
2018/12/20 Python
python 获取图片分辨率的方法
2019/01/08 Python
flask框架路由常用定义方式总结
2019/07/23 Python
Python 中list ,set,dict的大规模查找效率对比详解
2019/10/11 Python
python+Django+pycharm+mysql 搭建首个web项目详解
2019/11/29 Python
python实现发送带附件的邮件代码分享
2020/09/22 Python
Html5移动端适配IphoneX等机型的方法
2019/06/25 HTML / CSS
德国童装购物网站:NICKI´S.com
2018/04/20 全球购物
阿姆斯特丹城市卡:Amsterdam Pass
2019/12/01 全球购物
Edwaybuy西班牙:小米在线商店
2019/12/04 全球购物
事业单位辞职信范文
2014/01/19 职场文书
幼儿园消防安全制度
2014/01/26 职场文书
简历自我评价模版
2014/01/31 职场文书
幼儿园六一活动总结
2014/08/27 职场文书
成本会计岗位职责
2015/02/03 职场文书
全国法制宣传日活动总结
2015/05/05 职场文书
mysql查询的控制语句图文详解
2021/04/11 MySQL