web与后台交互--websocket

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

总结

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

上一篇:js 文件下载,多个文件下载,pdf下载


下一篇:原生 js上传zip压缩文件