真心佩服那些可以经常发布笔记的人,其实我也想经常发来的,奈何技术不够加上懒,要向大神们多多学习了,前段时间有用bomb平台自带的socket写一个聊天室,其实基本就是改了改它的demo,这次想实现一个随机私聊,所以自己基于node 和 socket.io 来搭服务,当然,第一次用node做东西玩,虽然做的不好,但是也蛮分享下哈。
下面是demo地址,可以自己开两个网页和自己聊天看效果哦~
基于node和socket的随机匹配聊天
先说说用到的东西, node 用来做后台服务,express 用来托管静态资源,然后socket.io 用来传送聊天数据。接下来说说思路,其实用socket.io来传数据是很简单的一件事情,我们只需要再前端页面引入 socket.io.js 然后再node端也require('socket.io'),把它在后端跑起来,那么前端就可以通过如下代码来发送或者接收信息。
我们来看后端怎么把socket跑起来
当然不仅如此,因为websocket协议,是在浏览器和服务器之间建立了一个长链接来相互传输数据,对服务器而言,如果打开了好几个页面,那么就有好几个socket实例,每个建立连接的前端页面都会有一个socket实例,这样就为接下来的点对点私聊提供了思路。当然,我们也可以通过直接广播来传送信息,不过这适用于聊天室情景。
那如何实现点对点呢,之前说了,每个建立连接的页面都会产生一个socket实例,那么我们只需要后端在接收消息的同时,判断该socket实例是和哪个个实例在聊天,只把消息发送给另一个匹配的socket实例就好了。简单来说就像写信一样,我把消息发送给后端,然后告诉后端,这个消息是给xxx的,然后后端找到xxx对应的socket实例,将消息发给他就好了。
通过上面的代码,后端得到了一个userServer的对象,里面是每个连接socket和其id的对应值,这样,就可以通过每次发送信息时,附带要接收对象的id来达到点对点的数据传输。
接下来就是数据处理咯,如何取到对方的id啊等等,鉴于我表达能力有限,加上懒,就不啰嗦啦~~ 代码我都托管在github欢迎自己下下来看咯~
https://github.com/mikoshu/mychatroom.git 然后,我知道我写的很烂,欢迎吐槽,和建议~~
下面是demo地址,可以自己开两个网页和自己聊天看效果哦~
基于node和socket的随机匹配聊天
先说说用到的东西, node 用来做后台服务,express 用来托管静态资源,然后socket.io 用来传送聊天数据。接下来说说思路,其实用socket.io来传数据是很简单的一件事情,我们只需要再前端页面引入 socket.io.js 然后再node端也require('socket.io'),把它在后端跑起来,那么前端就可以通过如下代码来发送或者接收信息。
-
1234567891011121314151617//前端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跑起来
-
1234567891011121314151617181920var 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实例,将消息发给他就好了。
-
123456789101112131415//前端window . id = new Date ( ) . getTime ( ) + "" + Math . floor ( Math . random ( ) * 899+100 ) ;//每次登录,获取一个唯一的用户idsocket = 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 然后,我知道我写的很烂,欢迎吐槽,和建议~~