1、websocket基本使用思路

源自自己接触的一个项目，发现websocket也不是想象中那么难。
这里记录下曾经的实现思路

  1. this.wsPath = this.initWsPath()
  2. // 实例化 socket
  3. this.socket = new WebSocket(this.wsPath)
  4. // 监听 socket 链接
  5. this.socket.onopen = this.wsOpen
  6. // 监听 socket 错误信息
  7. this.socket.onerror = this.wsError
  8. // 监听 socket 信息
  9. this.socket.onmessage = this.wsMessage
  11. // wsMessage (socket) {
  12. //      let res = socket.data
  13. // },

主要的代码其实都在

this.socket.onmessage()，后端后续发送的数据，我们都能通过其默认的第一个参数 socket 获取到；
该功能很适合用来实现 QQ聊天 类的功能；所有交互数据，都在一个 socket 里面。

websocket与http的区别：

  • websocket双向，http单向

    服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的一种

  • websocket是真正意义上的长连接，http的长连接可由Tomcat或者Nginx控制。

    这里指的是规范上要求的长连接。虽然其实我们都可以通过“代码”的方式去关闭。

怎么在不支持Websocket的客户端上使用Websocket？
答案是：无解。不过可以通过“轮询”之类的操作模拟。

2、拼单功能的实现

websocket作为一个实时连接，在拼单中可以时刻保持信息的最新。

  • 初次获取，当前列表
  • 用户提交（这里提交不一定要使用websocket），后端更新websocket返回
  • 在页面的显示效果就有拼单的效果了