懒人学做网站网站设计方案模板
WebSockets 是一种先进的技术。它可以在用户的浏览器和服务器之间打开交互式通信会话。你可以向服务器发送消息并接收事件驱动的响应，而无需通过轮询服务器的方式以获得响应，比较典型的应用场景就是即时通讯（聊天）系统。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>WebSocket 示例</title></head><body><script>// 实例化 socketconst ws = new WebSocket('wss://socketsbay.com/wss/v2/1/demo/')// 监听连接的建立ws.onopen = function (ev) {console.log('建立连接...')ws.send('Hello WebSockets!')}// 监听连接的断开ws.onclose = function (ev) {console.log('断开连接...')}// 监听 socket 服务器消息ws.onmessage = function (ev) {console.log('收到消息: ' + ev.data)}</script></body>
</html>
Socket.IO 是基于 WebSocket 进行的二次封装，封装了更多的业务层面的逻辑，如身份认证等、事件驱动等。
注：其实 Socket.IO 不仅仅是封装了 WebSocket，还有基于 Ajax 的长轮询机制，在不支持 WebSocket 的环境中会自动降级为基于 Ajax 的长轮询机制。
长轮询机制可以粗暴的理解为在一个定时器中不断的重复发 Ajax 请求，以实现与服务器实时通信的功能。
客户端代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>socket.io 示例</title>
</head><body><button id="myButton">点击</button><!-- <script src="node_modules/socket.io/client-dist/socket.io.js"></script> --><script src="https://cdn.socket.io/4.4.1/socket.io.min.js"></script><script>// 实例化const socket = io('http://localhost:3000', {transports: ['websocket'],})socket.on('connect', () => {console.log('建立连接...')})socket.on('disconnect', () => {console.log('断开连接...')})socket.on('sendToClient', (msg) => {console.log('收到来自服务器数据: ' + msg)})var myButton = document.getElementById('myButton');myButton.addEventListener('click', function () {socket.emit('sendToServer', '的花花世界是江苏省靖江市就是')});</script>
</body></html>
服务端代码
// server.js
import { createServer } from 'http'
import { Server } from 'socket.io'
import path from 'path'const server = createServer()
const io = new Server(server)// websocket
io.on('connection', (client) => {console.log('建立连接...')// 消息发送client.on('sendToServer', (msg) => {console.log('收到了客户端的数据: ' + msg)// 随机返回一条消息const messages = ['你好!', '我在写代码', '快下课了吧？']// 0 ~ 2 随机数据const index = Math.floor(Math.random() * 3)// 向客户端回复消息io.emit('sendToClient', messages[index])})// 断开连接client.on('disconnect', () => {console.log('断开连接...')})
})server.listen(3000, () => {console.log('server start')
})