web与后台交互--websocket

Posted 2021-02-21 木石心

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库，就看个人喜好了。

总结

目前先初步了解，并知道前后台通讯使用，而不再是后台说这个不好做就不做了。这个还是很有必要接入的。