配置环境
mkdir express
cd express
npm init
npm install express ws
// index.js
var app = require("express")();
var WebSocket = require("ws");var wss = new WebSocket.Server({ port: 8888 });wss.on('connection', function connection(ws) {ws.on('message', function incoming(message) {console.log('received: %s', message);});ws.send('something');
});app.get("/", function(req, res) {res.sendFile(__dirname + "/index.html");
});app.listen(4000, function() {console.log("Server is running on port 4000")
})
// index.html
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><h1>Hello</h1><p>WebSocket</p><button id="btn" onclick="ws.send('from client: click')">click</button><script>var ws = new WebSocket('ws://localhost:8888');ws.onopen = function () {console.log('ws onopen');ws.send('from client: hello');};ws.onmessage = function (e) {console.log('ws onmessage');console.log('from server: ' + e.data);};</script>
</body></html>
页面初始化事，就发送hello至ws，ws接收到后，返回“你好！”
简单实现了ws的交互。
下面介绍一下ws的相关知识点：
1. 基础概念
- 定义：WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议，它允许客户端和服务器之间进行实时、双向的数据传输。
- 诞生背景：传统的 HTTP 协议是无状态、单向的，每次通信都需要建立新的连接，无法满足实时通信的需求，WebSocket 应运而生。
2. 工作原理
- 握手阶段：客户端发起一个 HTTP 请求，请求头中包含特殊的升级字段（
Upgrade: websocket和Connection: Upgrade），服务器收到请求后，如果支持 WebSocket 协议，就会返回一个状态码为 101 的响应，表示同意升级协议，之后双方就可以在这个 TCP 连接上进行 WebSocket 通信。 - 数据传输：在建立连接后，客户端和服务器可以随时向对方发送数据，数据以帧的形式进行传输。
3. 使用场景
- 实时聊天应用：如在线客服、即时通讯软件等，能实现消息的即时推送和接收。
- 实时数据展示：如股票行情、体育赛事比分等，数据的变化能及时更新到客户端。
- 多人游戏：玩家之间的操作和状态可以实时同步。
4. 优缺点
- 优点
- 实时性强：数据可以即时传输，无需频繁建立连接。
- 减少开销：相比于 HTTP 长轮询和短轮询，减少了不必要的请求和响应头，降低了服务器和客户端的负担。
- 全双工通信：客户端和服务器可以同时发送和接收数据。
- 缺点
- 兼容性问题：一些旧版本的浏览器可能不支持 WebSocket 协议。
- 安全性要求高：需要注意防止中间人攻击和数据泄露。
5. 与其他协议对比
- 与 HTTP 对比
- HTTP 是无状态、单向的，每次请求都需要建立新的连接；WebSocket 是有状态、全双工的，建立连接后可以持续通信。
- HTTP 适用于一次性的请求 - 响应场景；WebSocket 适用于实时通信场景。
- 与 HTTP 长轮询对比
- HTTP 长轮询是客户端发送请求后，服务器保持连接直到有新数据才返回响应，然后客户端再重新发起请求；WebSocket 是建立一次连接后可以持续双向通信。
- HTTP 长轮询在服务器没有新数据时也会占用连接资源，而 WebSocket 只有在有数据传输时才会占用带宽。
/select *使用方式)
