服务端
首先新创建一个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
<template>
<div>
<p><input type="text" v-model="webstock_type"><button @click="sendMsg">测试webstock</button></p>
</div>
</template>
<script>
export default {
data() {
return {
webstock_type:'A'
}
},
created() {
//监听A事件，如果只想监听一次可以用 $this.$eventHub.$once
this.$eventHub.$on('A事件', (res)=>{
console.log('test.vue界面收到消息---',res);
} )
},
beforeDestroy(){
//如果组件没有缓存，记得离开组件前解除A事件的监听，
//不然重新加载该组件会出现重复监听的情况,缓存组件可以用 <keep-alive>
this.$eventHub.$off('A事件')
console.log(123);
},
methods: {
sendMsg:function () {
//往服务端发送一个消息，服务端马上回复消息，从触发webstock的接收消息方法里面注册的A事件
this.$webstock.send(JSON.stringify(this.webstock_type))
}
}
}
</script>
