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); // 這個就是客戶端發來的消息
});
});
打開瀏覽器就可以接受到數據了，后台再將你要的數據返回給你。