WebSocket 使得客戶端和伺服器之間的資料交換變得更加簡單，允許服務端主動向客戶端推送資料，可以取代以前的Ajax輪詢，節約頻寬和伺服器資源，更好地進行實時通訊。

1.客戶端使用方法

 1 // 建立一個websocket連線
 2 let ws = new WebSocket(config.websocketUrl)
 3 // 事件監聽
 4 // onopen - 建立連線時觸發
 5 // onmessage - 接收到資料時觸發
 6 // onerror - 錯誤時觸發
 7 // onclose - 關閉時觸發
 8 ws.onopen = function (e) {
 9   console.info('connect success！')
 
10 }
11 ws.onmessage = function (e) {
12   console.info('recive....')
13   let data = JSON.parse(e.data)
14   console.info(data) // 獲取服務端發來的資料
15 }
16 // 傳送資料
17 let value = {
18   name: this.name,
19   message: this.message
20 }
21 ws.send(JSON.stringify(value))
22 
23 // 關閉
24 ws.close()

2.node.js搭建websocket服務端

需要先安裝nodejs-websocket。

 1 var ws = require('nodejs-websocket');
 2 
 3 console.info('start connect...')
 4 
 5 var server = ws.createServer(function(conn){
 6   conn.on('text', function(data){
 7     console.info('recived:' + data)
 8     broadcast(data)
 9   })
10 
11   conn.on('close', function(code, reason){
 
12     console.info('close')
13   })
14 
15   conn.on('error', function(code, reason){
16     console.info('error')
17   })
18   
19 }).listen(8002)
20 
21 console.info('connect ok')
22 
23 // 廣播訊息-即給所有連線傳送訊息，實際使用中可以根據傳送的id區分
24 function broadcast(data){
25   server.connections.forEach((conn)=>{
26     conn.sendText(data)
27   })
28 }

3.基於websockt的簡易即時聊天案例

使用node.js搭建了websockt服務，監聽來自於客戶端的訊息併發送給所有建立連線的客戶端(相當於訊息轉發中心)，

前端使用vue完成，把訊息發到伺服器，同時監聽來自伺服器的訊息並進行相應的展示，後續會把案例放到Github。