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); // 这个就是客户端发来的消息 }); });
打开浏览器就可以接受到数据了,后台再将你要的数据返回给你。
扫描二维码关注公众号,回复:
6895188 查看本文章
![](/qrcode.jpg)