前言 一、为什么需要 WebSocket？
初次接触 WebSocket 的人，都会问同样的问题：我们已经有了 HTTP 协议，为什么还需要另一个协议？它能带来什么好处？
答案很简单，因为 HTTP 协议有一个缺陷：通信只能由客户端发起。可以看图
举例来说，我们想了解今天的天气，只能是客户端向服务器发出请求，服务器返回查询结果。HTTP 协议做不到服务器主动向客户端推送信息。
它的最大特点就是，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的一种。
webSocket协议 通常是ws和wss
客户端API
1.webSocket为构造函数 使用的时候需要new操作符
new WebSocket
2. readyState 状态
- CONNECTING：值为0，表示正在连接。
- OPEN：值为1，表示连接成功，可以通信了。
- CLOSING：值为2，表示连接正在关闭。
- CLOSED：值为3，表示连接已经关闭，或者打开连接失败。
3.onopen
用于指定连接成功后的回调函数
4.onclose
用于指定连接关闭后的回调函数
5.onmessage
用于指定收到服务器数据后的回调函数
6.send
方法用于向服务器发送数据
1.nodejs 通过express-ws 连接和发送给前端数据
服务端API 介绍
框架主要是express 后端长连接用的是express-ws
getWss 返回当前的连接池
const express = require('express') const app = express() const ws = require('express-ws') const wss = ws(app).getWss('/talk') app.ws('/talk', (ws, req) => { //console.log('success',ws) ws.on('message', msg => { wss.clients.forEach(w=>{ w.send(msg) }) }) }) app.listen(9001, () => { console.log('http://localhost:9001/talk') })
2.前端连接后台的webSocket 进行通信
const type = prompt('请输入1位红方阵营，2位蓝色方') let ws = new WebSocket('ws://localhost:9001/talk') let wrpas = document.querySelectorAll('.wraps div'); ws.onopen = () => { console.log('成功') } wrpas.forEach((item, index) => { item.onclick = function () { ws.send(JSON.stringify({ index, type })) } }) ws.onmessage = ({ data }) => { let options = JSON.parse(data) wrpas[options.index].style.background = options.type == 1 ? 'red' : 'blue'; }
