node及socket.io實現簡易websocket雙向通信

技術棧： vue2.0 + node + websocket( socket.io )

1. 安裝依賴

初始化vue項目后輸入下方指令安裝依賴包

// 推薦cnpm安裝
npm i vue-socket.io -S  // for 客戶端
npm i socket.io -S  // for 服務端node

2. 新建服務端目錄如下圖  server / app.js 

 

//  app.js
var app = require('http').createServer();
var io = require('socket.io')(app);
var PORT = 8081;

app.listen(PORT);
/*
    *新手必讀
    *function中的socket為每個客戶端單獨連接的socket實例，只通知當前連接用戶
    *io.sockets 通知所有連接用戶
    *socket.broadcast 給除了自己以外的客戶端廣播消息
*/
io.on('connection', function (socket) {
    for(let i=0; i<100; i++){
        setTimeout(()=>{
            io.sockets.emit('progress',i);
            console.log("當前進度為",i+1);
        },300*i)
    }
})

console.log('app listen at：'+PORT);

一般而言，運行node程序只需要在文件當前目錄下命令行輸入 node filename 即可，但是，既然是和vue腳手架一起構建，就充分利用起來。

打開package.json , 在 scripts 中 添加一行

"server": "node server/app.js",

現在，直接在vue項目的根目錄運行 npm run server 命令就可以開啟服務了。

3.  為了簡便，直接修改vue初始化項目中的components下的HelloWorld.vue文件

// HelloWorld.vue文件

<template>
  <div class="process" >
    <progress max="100" :value="progressValue"></progress>
  </div>
</template>
<script>
  import Vue from 'vue'
  import VueSocketio from 'vue-socket.io'
  Vue.use(VueSocketio, 'ws://localhost:8081') // 注意和本地服務器地址及端口一致

  export default {
    data(){
      return{
        progressValue: 0, // 進度值
      }
    },
    //（socket.on）綁定事件放在sockets中
    sockets:{ 
      // 創建連接
      connect(){
          console.log('連接成功啦')
      },
      // 監聽自定義progress事件，需與服務端emit事件名一致
      progress(res){
        this.progressValue = res;
        console.log('2222',res)
      }
    }
  }
</script>
<style scoped>
  .process { text-align:center; }
</style>

最后，運行代碼

npm run server   // 開啟服務

切記，不要關閉窗口，然后再新開命令行，注意，是新開一個，運行

npm run dev

就能看到一個進度條的效果了( 客戶端（瀏覽器）發起請求，然后服務端不停傳輸數據，客戶端監聽對應事件和數據並重新渲染頁面 )。

這只是很簡單的一個應用，在此基礎上很容易就可以改成比較多人在線聊天室的功能。