MDN地址：详细请移步WebSocket - Web API 接口参考 | MDN
websocket是一种通信协议。
定义： 客户端和服务器双向通信，双方同时可以进行通信和数据交换
优点：可以实现真正的并发和性能优化，从而产生响应更快，更丰富的web应用程序
Web Socket URL：
? 前端如何使用websocket：
? ? ? ? HTML5开始前端页面可以使用WebSocket('ws://localhost:3000')构造函数来生成websocket对象。其中ws://localhost:3000是webSocket服务器链接。
const ws = new WebSocket('ws://localhost:3000')几个重要的Events：
open: 当客户端和服务器端建立了连接之后会调用该方法。
ws.addEventListener('open',(event)=>{
con.innerHTML = '服务器已连接'
})message:当服务器端给客户端发送了数据就会触发这个方法
ws.addEventListener('message',(e)=>{
con.innerHTML = e.data
})close:当服务器和客户端断开连接之后触发该事件
error：当连接由一些错误事件而关闭时调用。
两个重要的方法：
close(): ws.close() 用于关闭连接
send():ws.send(data)用于发送数据
下面是一个尝试的客户端（前端）websoclet代码，这里的代码会和后面服务端websocket代码形成整体：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>简单的websocket通信案例</title>
<style>
.content{
margin-top:2px;
width: 200px;
height: 200px;
border:1px solid #888;
}
</style>
</head>
<body>
<div>
<input type="text" placeholder="请输入" class="inp">
<button class="btn">发送</button>
<div class="content"></div>
</div>
<script>
// 引入websocket
const ws = new WebSocket('ws://localhost:3000')
let input = document.querySelector('.inp')
let btn = document.querySelector('.btn')
let con = document.querySelector('.content')
ws.addEventListener('open',(event)=>{
con.innerHTML = '服务器已连接'
})
// 客户端点击发送数据到服务器
btn.addEventListener('click',(e)=>{
let value = input.value
ws.send(value)
})
ws.addEventListener('message',(e)=>{
con.innerHTML = e.data
})
</script>
</body>
</html>后端的websocket代码：这里使用nodejs搭建websocket服务器。
首先需要安装nodejs-websocket?
npm install nodejs-websocket详细代码见下方：
const ws = require('nodejs-websocket')
const PORT = 3000
// 只要有用户登录就调用一次函数，并请生成一个conn对象
const server = ws.createServer(conn =>{
// text 检测客户端传过来的数据
conn.on('text',(data)=>{
console.log(data)
conn.send('服务器端来的:'+data.toUpperCase())
})
conn.on('error',(data)=>{
console.log('错误')
})
})
server.listen(PORT,()=>{
console.log('服务器已启动')
})