WebSocket简介
WebSocket是一种网络传输协议，可在单个TCP连接上进行全双工通信，位于OSI模型的应用层。
特点
- TCP连接，与HTTP协议兼容
- 双向通信，主动推送(服务端向客户端)
- 无同源限制，协议标识符是ws( 加密wss)
应用场景
- 聊天，消息，点赞
- 直播弹幕、评论
- 游戏、协同编辑、基于位置的应用
前端库
- 【推荐】ws(实现原生协议，特点: 通用、性能高，定制性强)
- socket.io(向下兼容协议，特点:适配性强、性能一般
创建 WebSocket 服务端
新建文件夹 server，终端运行
cnpm init -y
初始化项目
安装 ws 库
cnpm i -S ws
新建项目启动文件 server\index.js
const WebSocket = require("ws");
// 在指定端口上，创建WebSocket服务
const wss = new WebSocket.Server({
port: 3001 });
// 客户端连接到服务器的回调
wss.on("connection", function connection(ws) {
console.log("一个客户端已连接");
// 服务端接收客户端的消息
ws.on("message", function (msg) {
console.log("服务端接收到来自客户端的消息：" + msg);
});
// 服务端发消息给客户端
ws.send("你好，客户端，我是服务端！");
});
启动项目
node server/index.js
创建 WebSocket 客户端
方法1：使用原生WebSocket
在html的js中执行
var ws = new WebSocket("ws://127.0.0.1:3001");
即可与WebSocket服务器建立连接
<!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>
<script>
// 与服务端建立WebSocket长连接
var ws = new WebSocket("ws://127.0.0.1:3001");
// 客户端发送消息给服务端
ws.onopen = function () {
ws.send("你好，服务端，我是客户端！");
};
// 客户端接收到服务端的消息
ws.onmessage = function (event) {
console.log(event.data);
};
</script>
</body>
</html>
方法2：使用ws
新建文件夹 client，终端运行
cnpm init -y
初始化项目
安装 ws 库
cnpm i -S ws
新建项目启动文件 client\index.js
// 导入ws库
const WebSocket = require("ws");
// 与服务端建立WebSocket长连接
const ws = new WebSocket("ws://127.0.0.1:3001");
ws.on("open", function () {
console.log("node客户端成功连接到服务器");
// 客户端发送消息给服务端
ws.send("你好，服务端，我是node客户端！");
// 客户端接收到服务端的消息
ws.on("message", function (msg) {
console.log("node客户端接收到服务端的消息：" + msg);
});
});
启动项目
node client/index.js