vue的监听者模式+webstock的结合使用

服务端

首先新创建一个node的空项目，然后安装 npm install nodejs-websocket
在index.js里面编写下面的内容：

var ws = require("nodejs-websocket");
console.log("开始建立连接...")
var server = ws.createServer(function(conn){
    conn.on("text", function (str) {
        console.log("收到的信息为:"+str)
        conn.sendText(str)
    })
    conn.on("close", function (code, reason) {
        console.log("关闭连接")
    });
    conn.on("error", function (code, reason) {
        console.log("异常关闭")
    });
}).listen(8001)

console.log("WebSocket建立完毕")

上面只是服务端跑起来一个webstock，为了方便后面的测试和演示，收到什么内容就回复什么内容

---

客户端

新建一个vue项目，在vue项目的入口文件 main.js编写以下内容

import Vue from 'vue'
import App from './App'
import {router} from './router/index'; //引入路由实例
import {webstock} from  './libs/webstock'

Vue.prototype.$webstock = webstock;
Vue.prototype.$eventHub=new Vue(); //注意这里的写法

export  const VueObj= new Vue({
  router,
  render: h => h(App)
}).$mount('#app-box')

webstock.js:

      import {VueObj} from '../main'
      export const webstock = new WebSocket("ws://192.168.1.119:8001");

      /**
       * webstock连接成功
       */
      webstock.onopen = function () {
        console.log("websocket open");
      /*  let obj = {"requestType": "login"}
        webstock.send(JSON.stringify(obj))*/
      }
      /**
       * webstock接收消息
       */
      webstock.onmessage = function (message) {
        //console.log(JSON.parse(message.data));
        //这里注册了一个A事件
        VueObj.$eventHub.$emit('A事件', JSON.parse(message.data))
      }
      /**
       * webstock关闭
       */
      webstock.onclose = function (event) {
        console.log("websocket close");
      }
      /**
       * webstock出错
       */
      webstock.onerror = function (event) {
        webstock.close(event);
        console.log("websocket error");
      }

./router/index (定义路由路径)

    {path: '/test', component: () => import('@/components/Test/test')},

test.vue