新开页面websocket会重新连接么_详解前端如何搭建一个websocket服务器

前言

今天这篇文章我们聊一聊websocket，上篇文章说到的SSE只能单向传递数据，而websocket是全双工的，可以双向传递数据！当我们遇到需要互相实时通信的场景时就可以使用它，比如聊天等！

客户端使用

在页面上的使用还是非常简单的，和上一篇的SSE类似，代码如下：

图1

浏览器提供了原生接口WebSocket，使用它的实例然后绑定几个事件就可以使用了！

• WebSocket的第一个参数是一个实现了websocket服务的后端接口地址，注意使用的协议是ws，第二个参数是它的子协议(这里没有使用)；
• onopen事件在连接服务成功时触发；
• onmessage事件在收发信息时触发，后端传来的数据可以从事件对象的data属性中取到；
• onclose事件在连接关闭时触发；
• 如果想要向后端传递数据，可以调用send方法。

如果想在页面上获取websocket的状态，可以通过实例对象的readyState属性获取，状态如下：

• 0表示正在连接；
• 1表示连接成功，可以通信了；
• 2表示正在关闭；<