WebSocket是一种通信协议，可在单个TCP连接上进行全双工通信。WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就可以建立持久性的连接，并进行双向数据传输
- WebSocket是HTML5下一种新的协议（websocket协议本质上是一个基于tcp的协议）
- Websocket是一个持久化的协议
相同点：
- 都是基于tcp的，都是可靠性传输协议
- 都是应用层协议
不同点：
- WebSocket是双向通信协议，模拟Socket协议，可以双向发送或接受信息
- HTTP是单向的
- WebSocket是需要浏览器和服务器握手进行建立连接的
- 而http是浏览器发起向服务器的连接，服务器预先并不知道这个连接
两者之间的一个联系
WebSocket在建立握手时，数据是通过HTTP传输的。但是建立之后，在真正传输时候是不需要HTTP协议的
一旦WebSocket连接建立后，后续数据都以帧序列的形式传输。在客户端断开WebSocket连接或Server端中断连接前，不需要客户端和服务端重新发起连接请求。在海量并发及客户端与服务器交互负载流量大的情况下，极大的节省了网络带宽资源的消耗，有明显的性能优势，且客户端发送和接受消息是在同一个持久连接上发起，实现了“真·长链接”，实时性优势明显
下载
npm i express-ws
app.js
var ws = require('express-ws')
var app = express();
ws(app)
app.listen('8888')index.js
var express = require('express');
var router = express.Router();
var ws = require('express-ws')
ws(router)
const wss = []
router.ws("/",(ws,req)=>{
// console.log("连接成功！");
// send给客户端发消息
// on是监听事件
// message表示服务端传来的数据
wss.push(ws)
ws.on("message", (msg) => {
console.log(msg);
// 给所有的客户端广播消息
// console.log(msg);
// console.log(wss);
wss.forEach((e) => {
e.send(msg)
})
})
// close 事件表示客户端断开连接时执行的回调函数
ws.on('close', function (e) {
console.log('close connection')
})
})
module.exports = router;
html页面（根目录创建）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" name="msg" id="msg">
<input type="button" value="发送" id="btn">
<ul id="showMsg"></ul>
<script>
function UrlSearch() {
var name, value;
var str = location.href; //取得整个地址栏
var num = str.indexOf("?")
str = str.substr(num + 1); //取得所有参数 stringvar.substr(start [,length ]
var arr = str.split("&"); //各个参数放到数组里
for (var i = 0; i < arr.length; i++) {
num = arr[i].indexOf("=");
if (num > 0) {
name = arr[i].substring(0, num);
value = arr[i].substr(num + 1);
this[name] = value;
}
}
}
var Request = new UrlSearch(); //实例化
var ws = new WebSocket("ws://localhost:8888");
var btn = document.getElementById('btn')
var inputDom = document.getElementById('msg')
var ulDom = document.getElementById('showMsg')
btn.addEventListener('click', function () {
ws.send(inputDom.value)
inputDom.value = ''
})
ws.onopen = function (evt) {
console.log("Connection open ...");
//ws.send("Hello WebSockets!");
};
let liHtml = ''
ws.onmessage = function (evt) {
console.log(evt.data);
liHtml += `<li>：${evt.data}</li>`
ulDom.innerHTML = liHtml
};
ws.onclose = function (evt) {
console.log("Connection closed.");
};
</script>
</body>
</html>在浏览器中同时打开两个html页面
另一个页面
后端打印
这样一个简单的在线聊天就完成了，这是多聊，还可以实现单聊模式