WebSocket是一种双向、单套接字连接,使用WebSocket,那么请求就变成了打开WebSocket连接的单一请求,并且可以重用公客户端到服务器以及服务器到客户端的同一连接。
WebSock减少延迟,一旦建立起WebSocket连接,服务器可以在消息可用的时候发送。这是轮询和WebSocket的比较。
WebSocket让实时通信更加有效,可以节约带宽、CPU资源并减少延迟。
WebSocket连接通过在客户端和服务端之间第一次握手的时候将http协议升级到WebSocket协议来完成,这个过程在相同的底层TCP连接上进行。
首先调用WebSocket构造函数,创建一个WebSocket连接,构造函数返回的WebSocket对象实例。
使用WebSocket接口,通过指向一个表示所要连接端点的URL,实例化一个WebSocket对象。
WebSocket协议定义了两种URL:ws和wss。和HTTP、HTTPS类似,表示非加密和加密数据。wss表示使用传输层安全性的WebSocket连接。
WebSocket构造函数有一个必填的URL和可选参数protocols,URL是指向连接目标的URL;protocols是为了建立连接,服务器必须在它响应中包含一个或者一组协议名称,比如:
<script>
let ws = new WebSocket("ws://localhost:3000/",['com.kaazing.echo']);
ws.onopen = () => {
ws.send("hello")
}
ws.onmessage =(ev) => {
console.log("ev", ev)
}
</script>
和所有的Web API事件一样,使用on+事件名称来处理属性监听这些事件。WebSocket对象调度4个不同的事件:
代码如下:
const express = require("express");
const http = require("http");
const Ws = require("ws").Server;
const App = express();
const server = http.createServer(app);
server.listen(3000);
app.use(express.static('www'));
let wsServer = new Ws({server});
wsServer.on("connection",function(socket){
console.log("连接成功");
socket.on("message",msg=>{
console.log("客户端信息",msg)
socket.send("客户端发送的信息:"+msg+","+new Date().getTime())
})
})
index.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>
<p id="mes"></p>
<script>
let pText = document.querySelector("p")
let ws = new WebSocket("ws://localhost:3000/", ['com.kaazing.echo']);
ws.onopen = (e) => {
console.log("WebSocket open", e);
setInterval(() => {
ws.send(new Date().getTime())
}, 2000)
}
ws.onmessage = ({ data }) => {
pText.innerText = data;
}
</script>
</body>
</html>
然后执行命令:node ws.js
,在浏览器打开上面创建的页面,效果如下: