インスタントコミュニケーション
インスタント通信はクライアントとサービス側の通信サービスであり、例えばチャット、メッセージプッシュなど、方式は3種類ある.

node内蔵netモジュールによる通信方式

WebSocketの通信方式

Socket.ioの通信方式

この3つの通信方式は似ています.サービス側:

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






    function send(){
        var sayinput = document.querySelector('#sayinput')
        ws.send(sayinput.value)      //    
        sayinput.value = ''
    }
    document.querySelector('#send').onclick = function(){
        send()
    }
    document.body.onkeup = function(event){
        if(event.keyCode == 13){
            send()
        }
    }
 

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は結局H 5が新しく出たもので、ブラウザの互換性があるので、私たちは一般的に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))
    }
    ...
}