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
