Vue2、websocket 與node.js接口 本地測試

1.安裝vue-native-websocket子產品

yarn add vue-native-websocket
           

或者用

npm install vue-native-websocket --save
           

1. 在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)
})
           

1. 項目中main.js使用如下圖

   

4.在項目中建立websocket.vue檔案，在HelloWorld.vue中引入

1. 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 + '斷開連接配接');
    });
});         
           

1. Vue2、websocket 與node.js接口 本地測試到這裡就結束了。