即时通讯

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

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

这三种通信方式都很类似，

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

客户端：

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

Websocket实现简单聊天窗口

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

//1、创建服务var WebsocketServer = require('ws').Servervar wss = new WebsocketServer({port: 9000})//var clientMap = new Object()var i = 0wss.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.jsnpm init cnpm i ws -D

socket.io

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

(1) 服务端

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.jsconst EventEmitter = require('events').EventEmitterlet broadcast = Object.assign({},EventEmitter.prototype)module.exports = broadcastwwwbroadcast.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) 客户端

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.vueimport bus from '../../event_bus'export default {    data(){        return {            isHasNew = false        }    },    mounted(){        bus.$on('xin', function () {    //接收到服务器端有新数据，那我就提示有新数据楼            this.isHasNew = true        }.bind(this))    }    ...}