消息实时推送——net实现、websocket实现、socket.io实现

时间：2023-04-03 23:18:10 Node.js

InstantMessagingInstantMessaging是客户端和服务端之间的一种通信服务，如聊天、消息推送等。一共有三种方式：node内置的net模块实现的通信方式、WebSocket的通信方式、Socket.io的通信方式，Socket.io的通信方式。很相似，服务器：1.创建服务2.创建连接获取客户端信息3.服务器向各个客户端广播数据4.服务器关闭连接客户端：1.客户端连接服务器2.客户端发送data3.客户端接受服务器数据Websocket实现一个简单的聊天窗口1.服务端新建文件WsServer.js//1并创建服务varWebsocketServer=require('ws').Servervarwss=newWebsocketServer({port:9000})//varclientMap=newObject()vari=0wss.on('connection',funciton(ws){console.log(ws+'online')ws.name=++iclientMap[ws.name]=ws//接收客户端数据ws.on('message',function(msg){broadcast(msg,ws)})//客户端关闭监听ws.on('close',function(){deleteclientMap[ws.name]console.log(ws.n??ame+'leave')})})functionbroadcast(msg,ws){for(varkeyinclientMap){clientMap[key].send(ws.n??ame+'say'+msg)}}2.客户端新建一个html页面index.html

Websocket

3.客户端wsClient.jsvarws=newWebSocket('ws://10.0.0.1:9000/')ws.onopen=function(){ws.send('大家好')}ws.onmessage=function(event){varchatroom=document.querySelector('#chatroom')chatroom.innerHTML+='
'+event.data}ws.onclose=function(){console.log('closed')}ws.onerr=function(err){console.log(err)}在html中引入wsClient.js启动服务器节点WsServer.jsnpminitcnpmiws-Dsocket.ioWebsocket毕竟是newinH5，具有浏览器兼容性，所以我们一般使用socket.io作为通信方式，支持websocket通信协议，兼容ie浏览器(1)服务端启动一个节点服务，绑定连接事件链接客户端在www中配置varhttp=require('http')varserver=http.createServer(app)//启动一个服务vario=require('socket.io')(server)varbroadcast=require('./broadcast')varclients={}varcount=0;io.on('connection',(socket)=>{socket.name=++count;clients[socket.name]=socketsocket.on('disconnect',()=>{deleteclients[socket.name]//断开链接})})//如何把服务端的数据分发给各个客户端，这里定义一个广播中间事件broadcast.jsconstEventEmitter=require('events').EventEmitterletbroadcast=Object.assign({},EventEmitter.prototype)module.exports=broadcastwwwbroadcast.on('hahaha',function(message){//分发服务器信息给各个客户端for(varnameinclients){clients[name].send(message)}})//如何使用？当服务端有新消息时，我们应该如何订阅客户端呢？如果我添加新产品，客户端会实时收到新产品willSaveProducts.save().then(()=>{broadcast.emit('hahaha','xin')console.log('添加成功')res.json(getParam({success:true}))})(2)客户端定义总线bus并传递参数importVuefrom'vue'constevent_bus=newVue()exportdefaultevent_bus建立连接并接受来自服务器的信息importbusfrom'../event_bus'constsocket=io.connect('http://localhost:3000')socket.on('message',(message)=>{bus.$emit(message)})组件调用接收传入的参数并根据参数响应main.vueimportbusfrom'../../event_bus'exportdefault{data(){return{isHasNew=false}},mounted(){bus.$on('xin',function(){//服务端接收新数据，然后提示有新数据构建this.isHasNew=true}.bind(this))}。..}

上一篇：FlexBox概念

下一篇：Node.js全局对象process

消息实时推送——net实现、websocket实现、socket.io实现相关文章