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 相关文章推荐
用户代理字符串userAgent可实现的四个识别
Sep 20 Javascript
jQuery实现选中弹出窗口选择框内容后赋值给文本框的方法
Nov 23 Javascript
JS中使用apply、bind实现为函数或者类传入动态个数的参数
Apr 26 Javascript
jQuery1.9+中删除了live以后的替代方法
Jun 17 Javascript
ES6入门教程之Iterator与for...of循环详解
May 17 Javascript
浅谈微信小程序之官方UI框架we-ui使用教程
Aug 20 Javascript
大转盘抽奖小程序版 转盘抽奖网页版
Apr 16 Javascript
详解VS Code使用之Vue工程配置format代码格式化
Mar 20 Javascript
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
May 12 jQuery
Vue实现拖放排序功能的实例代码
Jul 08 Javascript
Preload基础使用方法详解
Feb 03 Javascript
vue router-link 默认a标签去除下划线的实现
Nov 06 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中文URL编解码(urlencode()rawurlencode()
2010/07/03 PHP
php采集文章中的图片获取替换到本地(实现代码)
2013/07/08 PHP
C#静态方法与非静态方法实例分析
2014/09/22 PHP
phpstudy后门rce批量利用脚本的实现
2019/12/12 PHP
ext实现完整的登录代码
2008/08/08 Javascript
jquery 上下滚动广告
2009/06/17 Javascript
三级下拉菜单的js实现代码
2011/05/23 Javascript
jquery 缓存问题的几个解决方法
2013/11/11 Javascript
当某个文本框成为焦点时即清除文本框内容
2014/04/28 Javascript
Jquery api 速查表分享
2015/01/12 Javascript
javascript实现漂亮的拖动层,窗口拖拽特效
2015/04/24 Javascript
ichart.js绘制虚线、平均分虚线效果的实现代码
2016/05/05 Javascript
jquery+CSS3实现3D拖拽相册效果
2016/07/18 Javascript
微信小程序 定义全局数据、函数复用、模版等详细介绍
2016/10/27 Javascript
基于js实现的限制文本框只可以输入数字
2016/12/05 Javascript
微信小程序 swiper制作tab切换实现附源码
2017/01/21 Javascript
你有必要知道的10个JavaScript难点
2017/07/25 Javascript
js 概率计算(简单版)
2017/09/12 Javascript
JavaScript实现的简单加密解密操作示例
2018/06/01 Javascript
koa源码中promise的解读
2018/11/13 Javascript
使用nvm和nrm优化node.js工作流的方法
2019/01/17 Javascript
elementUI select组件使用及注意事项详解
2019/05/29 Javascript
vue与django集成打包的实现方法
2019/11/11 Javascript
vue自定义组件(通过Vue.use()来使用)即install的用法说明
2020/08/11 Javascript
Python实现将HTML转换成doc格式文件的方法示例
2017/11/20 Python
python 利用栈和队列模拟递归的过程
2018/05/29 Python
pycharm设置python文件模板信息过程图解
2020/03/10 Python
python3中celery异步框架简单使用+守护进程方式启动
2021/01/20 Python
利用Python如何画一颗心、小人发射爱心
2021/02/21 Python
德国最大的拼图在线商店:Puzzle.de
2016/12/17 全球购物
流行文化收藏品:Sideshow(DC漫画,星球大战,漫威)
2019/03/17 全球购物
英国购买威士忌网站:Master of Malt
2019/09/26 全球购物
消防志愿者活动方案
2014/08/23 职场文书
2015年物资管理工作总结
2015/05/20 职场文书
死亡诗社观后感
2015/06/05 职场文书
UNION CREATIVE《Re:从零开始的异世界生活》雷姆手办
2022/03/20 日漫