Vue2、websocket 與node.js接口 本地測試
1. 安裝vue-native-websocket模塊
2. yarn add vue-native-websocket
或者用
npm install vue-native-websocket --save
3. 在main.js中引入websocket
import websocket from 'vue-native-websocket'
Vue.prototype.$websocket = websocket
Vue.use(websocket, 'ws://localhost:3000', {
reconnection: true, // (Boolean) whether to reconnect automatically (false)
reconnectionAttempts: 5, // (Number) number of reconnection attempts before giving up (Infinity),
reconnectionDelay: 3000, // (Number) how long to initially wait before attempting a new (1000)
})
項目中main.js使用如下圖
4.在項目中新建websocket.vue文件，在HelloWorld.vue中引入
5. HelloWorld.vue文件代碼如下
<template>
<div class="hello">
<websocket/>
</div>
</template>
<script>
import websocket from "@/components/websocket"
export default {
name: 'HelloWorld',
components:{
websocket
},
data () {
return {
}
},
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
6.websocket.vue代碼如下
<template>
<div>
{{msg}}
</div>
</template>
<script>
export default {
name:"websocket",
data() {
return {
websock: null,
msg:""
}
},
created(){
//頁面剛進入時開啟長連接
this.initWebSocket()
},
destroyed: function() {
//頁面銷毀時關閉長連接
this.websocketclose();
},
methods: {
initWebSocket(){ //初始化weosocket
const wsuri = 'ws://localhost:3000';//ws地址
this.$websocket = new WebSocket(wsuri);
this.$websocket.onopen = this.websocketonopen;
this.$websocket.onerror = this.websocketonerror;
this.$websocket.onmessage = this.websocketonmessage;
this.$websocket.onclose = this.websocketclose;
},
websocketonopen() {
console.log("WebSocket連接成功");
},
websocketonerror(e) { //錯誤
console.log("WebSocket連接發生錯誤");
},
websocketonmessage(e){ //數據接收
console.log(e);
this.msg=e.data
},
websocketsend(agentData){//數據發送
this.$websocket.send(agentData);
},
websocketclose(e){ //關閉
console.log("connection closed (" + e.code + ")");
},
},
}
</script>
7.創建一個新的項目，新建1.js文件，用於寫node.js接口，安裝
nodejs-websocket模塊npm install websocket
用cmd或者git bash進入后台接口文件，1.js，然后命令行輸入node 1.js，啟動后台服務。文件如下：
var WebSocketServer = require('websocket').server;
var http = require('http');
var server = http.createServer(function(request, response) {
console.log((new Date()) + ' Received request for ' + request.url);
response.writeHead(404);
response.end();
});
server.listen(3000, function() {
console.log((new Date()) + ' Server is listening on port 3000');
});
wsServer = new WebSocketServer({
httpServer: server,
});
wsServer.on('request', function(request) {
//當前的連接
var connection = request.accept(null, request.origin);
setInterval(function(){
connection.sendUTF('服務端發送消息' + (Math.random().toFixed(2)))
},500)
console.log((new Date()) + '已經建立連接');
connection.on('message', function(message) {
if (message.type === 'utf8') {
console.log('Received Message: ' + message.utf8Data);
connection.sendUTF(message.utf8Data);
}
else if (message.type === 'binary') {
console.log('Received Binary Message of ' + message.binaryData.length + ' bytes');
connection.sendBytes(message.binaryData);
}
});
connection.on('close', function(reasonCode, description) {
console.log((new Date()) + ' Peer ' + connection.remoteAddress + '斷開連接');
});
});
8. Vue2、websocket 與node.js接口 本地測試到這里就結束了，以上代碼用到Websocketd的方法詳見websocket文檔