web與后台交互--websocket

websocket 一直都想進行了解一下，而且在實際開發過程中，經常遇到類似的問題，奈何一些緣故，被迫選擇長輪詢模式。思來想去還是不妥，因而自己先研究一下再說話。

嘗試

既然選擇 websocket，那就需要前台后台了。在這過程中，有一點犯難了。
當后台選擇 node 作為服務時，有很多類似的 包 可以供選擇，而相應的都提供了 client 和 server 的demo。但作為一個前端，能用瀏覽器的api就可能少引入第三方包。因而最終定下來：

• 前台 websocket 瀏覽器自帶的api
• node ws

client

websocket 這里還是看看阮一峰老師的文章，mdn的文檔不是很清晰

  // url 選擇后台websocket的url
  const ws = new WebSocket("ws://localhost:8080");

  ws.addEventListener('open', evt => {
    console.log("Connection open ...");
    ws.send("Hello WebSockets!");
  })

  ws.addEventListener('message', evt => {
    const { data } = evt
    console.log("Received Message: " + data);

    if(typeof data === String) {
      console.log(`Received data string ${data}`);
    }

    if(data instanceof ArrayBuffer){
      console.log(`Received arraybuffer ${data}`);
    }
    // ws.close();
  })
  
  ws.addEventListener("close", evt => {
    console.log(evt, 'close')
  });

  ws.addEventListener('error', evt => {
    console.log(evt, 'error')
  })

server

ws

const WebSocketServer = require('ws').Server

const wss = new WebSocketServer({
  port: 8080
})

wss.on('connection', ws => {
  ws.send('后台傳入的數據')
  ws.on('message', data => {
    console.log(data, '前台傳入的數據')
  })
})

console.log('WebSocket server is listening on ws://localhost:8080')

在使用過程中，需要注意 文檔使用說明，目前有很多websocket庫，就看個人喜好了。

總結

目前先初步了解，並知道前后台通訊使用，而不再是后台說這個不好做就不做了。這個還是很有必要接入的。