WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。
在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。
如果对websocket完全没有了解的可以看下菜鸟教程： https://www.runoob.com/html/html5-websocket.html
建立一个小demo来演示一下吧，
1.新建一个html文件：
<!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>websoket</title> <style> </style> </head> <body> <script> let ws = new WebSocket('ws://localhost:8888'); // onopen是客户端与服务端建立连接后触发 ws.onopen = function () { ws.send('你好啊'); }; // onmessage是当服务端给客户端发来消息的时候触发，接收数据 ws.onmessage = function (res) { console.log(res); // 打印的是MessageEvent对象 // 真正的消息数据是 res.data }; </script> </body> </html>
2.使用node.js的express来简单搭个后台服务，新建一个js文件，如sever.js
1）. 安装ws $ npm i ws -S
2). 安装express $npm i express -S
const express = require('express');
const app = express();
// 设置静态文件夹
app.use(express.static(__dirname));
app.listen(3000); // 可以再浏览器上打开localhost：3000
//=============================================
// 开始创建一个websocket服务
const Server = require('ws').Server;
const ws = new Server({ port: 8888 });
// 监听服务端和客户端的连接情况
ws.on('connection', function(socket) {
// 监听客户端发来的消息
socket.on('message', function(msg) {
console.log(msg); // 这个就是客户端发来的消息
});
});
打开浏览器就可以接受到数据了，后台再将你要的数据返回给你。