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 相关文章推荐
利用JavaScript实现新闻滚动效果(实例代码)
Nov 27 Javascript
手写的一个兼容各种浏览器的javascript getStyle函数(获取元素的样式)
Jun 06 Javascript
javascript操作ul中li的方法
May 14 Javascript
jQuery的选择器中的通配符[id^='code']或[name^='code']及jquery选择器总结
Dec 24 Javascript
javascript实现input file上传图片预览效果
Dec 31 Javascript
javascript ASCII和Hex互转的实现方法
Dec 27 Javascript
js Canvas绘制圆形时钟效果
Feb 17 Javascript
微信小程序如何引用外部js,外部样式,公共页面模板
Jul 23 Javascript
js实现图片区域可点击大小随意改变(适用移动端)代码实例
Sep 11 Javascript
Layui数据表格判断编辑输入的值,是否为我需要的类型详解
Oct 26 Javascript
javascript 模块依赖管理的本质深入详解
Apr 30 Javascript
JavaScript数组排序的六种常见算法总结
Aug 18 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
PHP file_get_contents设置超时处理方法
2013/09/30 PHP
php中\r \r\n \t的区别示例介绍
2014/02/08 PHP
php示例详解Constructor Prototype Pattern 原型模式
2015/10/15 PHP
CodeIgniter配置之routes.php用法实例分析
2016/01/19 PHP
实例分析PHP将字符串转换成数字的方法
2019/01/27 PHP
PHP商品秒杀问题解决方案实例详解【mysql与redis】
2019/07/22 PHP
自写的一个jQuery圆角插件
2010/10/26 Javascript
10款新鲜出炉的 jQuery 插件(Ajax 插件,有幻灯片、图片画廊、菜单等)
2011/06/08 Javascript
jquery获取radio值(单选组radio)
2014/10/16 Javascript
jQuery实现的五子棋游戏实例
2015/06/13 Javascript
贴近用户体验的Jquery日期、时间选择插件
2015/08/19 Javascript
jQuery实现固定在网页顶部的菜单效果代码
2015/09/02 Javascript
jQuery EasyUI API 中文帮助文档和扩展实例
2016/08/01 Javascript
jQuery与JS加载事件用法分析
2016/09/04 Javascript
jQuery Easyui 下拉树组件combotree
2016/12/16 Javascript
微信小程序实现手势滑动卡片效果
2019/08/26 Javascript
layui table数据修改的回显方法
2019/09/04 Javascript
vue多个元素的样式选择器问题
2019/11/29 Javascript
一篇文章带你浅入webpack的DLL优化打包
2020/02/20 Javascript
[02:49]2014DOTA2电竞也是体育项目! 势要把荣誉带回中国!
2014/07/20 DOTA
详解在Python程序中解析并修改XML内容的方法
2015/11/16 Python
python skimage 连通性区域检测方法
2018/06/21 Python
浅析python3中的os.path.dirname(__file__)的使用
2018/08/30 Python
在Python中字典根据多项规则排序的方法
2019/01/21 Python
python Pillow图像处理方法汇总
2019/10/16 Python
Python对Excel按列值筛选并拆分表格到多个文件的代码
2019/11/05 Python
GUESS西班牙官方网上商城:美国服饰品牌
2017/03/15 全球购物
Hotter Shoes英国官网:英伦风格,舒适的鞋子
2017/12/28 全球购物
Bogner美国官网:滑雪服中的”Dior”
2018/01/30 全球购物
世界上最大的高分辨率在线图片库:Alamy
2018/07/07 全球购物
出国考察邀请函
2014/01/21 职场文书
2014全国两会心得体会
2014/03/17 职场文书
遗产继承公证书
2014/04/09 职场文书
大学共青团员个人自我评价
2014/04/16 职场文书
小学美术兴趣小组活动总结
2014/07/07 职场文书
2016年感恩母亲节活动总结
2016/04/01 职场文书