消息的即时推送——net实现、websocket实现以及socket.io实现

即时通讯

即时通讯是一种客户端与服务端的通信服务,例如聊天,消息推送等,方式有三种:

  • node内置net模块实现的通信方式
  • WebSocket的通信方式
  • Socket.io的通信方式

这三种通信方式都很类似,
服务端:

1、创建服务
2、创建连接 拿到客户端信息
3、服务端广播数据给各个客户端
4、服务端关闭连接

客户端:

1、客户端连接服务器
2、客户端发送数据
3、客户端接受服务端数据

Websocket实现简单聊天窗口

1、服务端 新建文件WsServer.js

//1、创建服务
var WebsocketServer = require('ws').Server
var wss = new WebsocketServer({port: 9000})
//
var clientMap = new Object()
var i = 0
wss.on('connection',funciton(ws){
    console.log(ws + '上线啦')
    ws.name = ++i
    clientMap[ws.name] = ws
    //接收客户端数据
    ws.on('message',function(msg){
        broadcast(msg, ws)
    })
    //客户端关闭监听
    ws.on('close',function(){
        delete clientMap[ws.name]
        console.log(ws.name + '离开')
    })
})
function broadcast(msg, ws){
    for(var key in clientMap){
        clientMap[key].send(ws.name + '说' + msg)
    }
}

2、客户端 新建html页面

index.html

Websocket

3、客户端wsClient.js

var ws = new WebSocket('ws://10.0.0.1:9000/')
ws.onopen = function(){
    ws.send('大家好')
}
ws.onmessage = function(event){
    var chatroom = document.querySelector('#chatroom')
    chatroom.innerHTML += '
' + event.data } ws.onclose = function(){ console.log('closed') } ws.onerr = function(err){ console.log(err) } 在html中引入wsClient.js 启动服务端 node WsServer.js npm init cnpm i ws -D

socket.io

Websocket毕竟是H5新出的,有浏览器的兼容性,所以我们一般用socket.io这种通讯方式,支持websocket的通信协议,又可以兼容ie浏览器

(1) 服务端
启动一个node服务,并绑定connection事件来链接客户端
www 中配置

var http = require('http')
var server = http.createServer(app)  //启动一个服务

var io =  require('socket.io')(server)
var broadcast = require('./broadcast')
var clients = {}
var count = 0;
io.on('connection',(socket)=>{
    socket.name = ++count;
    clients[socket.name] = socket
    
    socket.on('disconnect',()=>{
        delete clients[socket.name]     //断开链接
    })
})

//如何将服务器的数据派发到各个客户端呢,我们这里定义一个broadcast中间事件

broadcast.js

const EventEmitter = require('events').EventEmitter
let broadcast = Object.assign({},EventEmitter.prototype)
module.exports = broadcast

www

broadcast.on('hahaha',function(message){    //将服务端的信息分发给各个客户端
    for(var name in clients){
        clients[name].send(message)
    }
})

//如何使用呢?当服务端有新的消息时,我们应该如何订阅到客户端

这里,如果我新添加一条商品,客户端要实时接收到有新商品了
willSaveProducts.save().then(()=>{
    broadcast.emit('hahaha','xin')
    console.log('添加成功')
    res.json(getParam({success:true}))
})

(2) 客户端
定义bus总线,进行传参

import Vue from 'vue'
const event_bus = new Vue()
export default event_bus

建立链接 并接受服务端传过来的信息

import bus from '../event_bus'
const socket = io.connect('http://localhost:3000')

socket.on('message',(message)=>{
    bus.$emit(message)
})

组件 调用 接收传过来的参数 根据参数来响应

main.vue

import bus from '../../event_bus'

export default {
    data(){
        return {
            isHasNew = false
        }
    },
    mounted(){
        bus.$on('xin', function () {    //接收到服务器端有新数据,那我就提示有新数据楼
            this.isHasNew = true
        }.bind(this))
    }
    ...
}

你可能感兴趣的:(node.js,express,socket.io)