微信公众号会员卡管理系统,长春企业网站制作优化,网站建设最重要的环节,河北企业建网站WebSockets 是一种先进的技术。它可以在用户的浏览器和服务器之间打开交互式通信会话。你可以向服务器发送消息并接收事件驱动的响应#xff0c;而无需通过轮询服务器的方式以获得响应#xff0c;比较典型的应用场景就是即时通讯#xff08;聊天#xff09;系统。 !DOC… WebSockets 是一种先进的技术。它可以在用户的浏览器和服务器之间打开交互式通信会话。你可以向服务器发送消息并接收事件驱动的响应而无需通过轮询服务器的方式以获得响应比较典型的应用场景就是即时通讯聊天系统。 !DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleWebSocket 示例/title/headbodyscript// 实例化 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
/htmlSocket.IO 是基于 WebSocket 进行的二次封装封装了更多的业务层面的逻辑如身份认证等、事件驱动等。 注其实 Socket.IO 不仅仅是封装了 WebSocket还有基于 Ajax 的长轮询机制在不支持 WebSocket 的环境中会自动降级为基于 Ajax 的长轮询机制。
长轮询机制可以粗暴的理解为在一个定时器中不断的重复发 Ajax 请求以实现与服务器实时通信的功能。
客户端代码
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titlesocket.io 示例/title
/headbodybutton idmyButton点击/button!-- script srcnode_modules/socket.io/client-dist/socket.io.js/script --script srchttps://cdn.socket.io/4.4.1/socket.io.min.js/scriptscript// 实例化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 pathconst 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)
})
