WebSocket基本使用方法
WebSocket是一种双向、单套接字连接，使用WebSocket，那么请求就变成了打开WebSocket连接的单一请求，并且可以重用公客户端到服务器以及服务器到客户端的同一连接。
WebSock减少延迟，一旦建立起WebSocket连接，服务器可以在消息可用的时候发送。这是轮询和WebSocket的比较。
WebSocket让实时通信更加有效，可以节约带宽、CPU资源并减少延迟。
WebSocket连接通过在客户端和服务端之间第一次握手的时候将http协议升级到WebSocket协议来完成，这个过程在相同的底层TCP连接上进行。
创建WebSocket连接
首先调用WebSocket构造函数，创建一个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个不同的事件：
-
open，当服务器响应了WebSocket连接请求，那么open事件触发并且建立一个连接，open事件对应的回调函数就是onopen。 -
message，在接收到消息时候触发，对应事件的回调函数是onmessage， -
error，在响应意外故障的时候触发，对应的回调函数是onerror。错误还会导致WebSocket连接关闭。 -
close，在WebSocket连接关闭的时候触发，对应的回调函数是onclose。一旦连接关闭，那么客户端或者服务器就不再能接收或者发送信息。
创建服务端的WebSocket
代码如下：
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，在浏览器打开上面创建的页面，效果如下：
