什么是WebSocket以及使用方法-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_61597234/article/details/135224914

一、为什么要用websocket

传统的HTTP协议是一种无状态的、无连接的、单向的应用层协议。它采用了请求/响应模型。通信请求只能由客服端发起，服务端对请求做出应答。

因为HTTP通信只能由客户端发起，服务器返回查询结果，HTTP协议做不到服务器主动向客服端推送信息。服务端有连续的状态变化时，客户端要获知就非常麻烦。所以只能使用轮询：每隔一段时间，发出一个询问，了解服务器有没有新的消息或改变，典型的案例就是聊天室。
轮询的效率低，非常浪费资源（因为必须不停连接，或者HTTP连接始终打开）

二、什么是WebScoket

WebSocket对象提供了用于创建和管理WebScoket连接，以及可以通过该连接发送和接收数据的 API。

基本语法：

WebSocket 对象作为一个构造函数，用于新建 WebSocket 实例。
var WebSocket = new WebSocket(url [, protocols]);

参数：

url：要连接的 url；这应该是 WebSocket 服务器将响应的 url。
protocol：是可选的，指定了可接受的子协议。

特点

它最大的特点就是，服务器可以主动向客服端推送信息，客户端也可以主动向服务器发送信息。允许客服端和服务器之间进行全双工通信，以便任意一方都可以通过建立的连接将数据推送到另一端。并且websocket只需要建立一次连接，就可以一直保持连接状态。相比轮询方式的不停的建立连接显然效率大大提高了

三、使用方法

// 使用websocket()构造函数，创建websocket对象
let ws = new WebSocket('ws://localhost:8080')

//连接成功后的回调函数
ws.open = function (params) {
  console.log('客户端连接成功')
  //向服务器发送消息
  ws.send('连接成功了')
}

//从服务器接收到信息时的回调
ws.onmessage = function (mes) {
  console.log('接收到服务器传递的信息',mes)
}

//连接关闭后的回调函数
ws.onclose = function (e) {
  console.log('关闭连接')
}

//连接失败后的回调函数
ws.onerror = function (err) {
  console.log('连接失败')
}

//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断就关闭了窗口。
window.onbeforeunload = function () {
  ws.close()
}