复制代码运行之后如下,服务端即时获得客户端的消息 。
七、websocket服务端基于socket.io的搭建socket.io就是众多websocket库中的一种,它并不像其它库那样简单地实现了一下websocket,而是在websocket外面包裹了厚厚的一层 。普通的websocket(例如ws库)只需要服务端就够了,socket.io自定义了一种基于websocket的协议,所以socket.io的服务端和客户端必须配套 。简言之,如果服务端使用socket.io,那么客户端就没得选了,必然也用socket.io的客户端 。
- socket.io 是 基于engine.io 进行封装的库
- socket.io 是基于 Websocket 的Client-Server 实时通信库 。
- socket.io 底层使用engine.io 封装了一层协议 。
7.1 socket.io事件7.1.1 socket.io服务器的系统事件io.on('connection', callback): 有新Socket连接建立时 socket.on('message', callback): 当有socket..send()方法发送完信息后触发 socket.on('disconnect', callback): 当连接断开时触发
7.1.2 客户端的系统事件socket.io.on(‘open’, callback): 当socket客户端开启与服务器的新连接时触发 socket.io.on(‘connect’, callback):当socket客户端连接到服务器后触发 socket.io.on(‘connect_timeout’, callback):当socket客户端与服务器连接超时后触发 socket.io.on(‘connec_errort’, callback):当socket客户端连接服务器失败时触发 socket.io.on(‘connec_attemptt’, callback):当socket客户端尝试重新连接到服务器后触发 socket.io.on(‘reconnect’, callback):当socket客户端重新连接到服务器后触发 socket.io.on(‘reconnect_error’, callback):当socket客户端重新连接服务器失败后触发 socket.io.on(‘reconnect_fail’, callback):当socket客户端重新连接到服务器失败后触发 socket.io.on(‘close’, callback):当socket客户端关闭与服务器的连接后触发
7.2 原生 nodejs 结合 Socket.io 实现服务器和 客户端的相互通信1、 安装 Socket.io 2、 写原生的 JS,搭建一个服务器,server 创建好之后,创建一个 io 对象 。3、 服务器端通过 emit 广播,通过 on 接收广播 4、 客户端端通过 emit 广播,通过 on 接收广播
WebSocket protocol是HTML5一种新的协议 。它实现了浏览器与服务器全双工通信,同时允许跨域通讯,是server push技术的一种很好的实现 。我们使用Socket.io,它很好地封装了webSocket接口,提供了更简单、灵活的接口,也对不支持webSocket的浏览器提供了向下兼容 。
7.2.1 为什么需要 WebSocket了解计算机网络协议的人,应该都知道:HTTP 协议是一种无状态的、无连接的、单向的应用层协议 。它采用了请求/响应模型 。通信请求只能由客户端发起,服务端对请求做出应答处理 。
这种通信模型有一个弊端:HTTP 协议无法实现服务器主动向客户端发起消息 。
7.2.2 具体步骤和使用1、 安装 Socket.io
网址:socket.io/
npm install socket.io 或者 yarn addsocket.io复制代码
2、搭建一个server 服务器,创建一个 io 对象 。var http = require('http');var path = require('path');var fs = require('fs');//引入socket.iovar socket = require('socket.io');var app = http.createServer(function(req,res){//加载静态页面fs.readFile(path.resolve(__dirname,'app.html'),function(err,data){if(req.url=="/"){res.writeHead(200,{"Content-Type":"text/html;charset='utf-8'"});res.end(data);}})})// socket 与 http服务建立连接var io = socket(app);// 监听连接事件 io.on('connection',function(sock){console.log(sock)console.log('服务器建立连接了');})app.listen(3000,'127.0.0.1');复制代码
socket 与 http服务建立连接后,你就会发现,http://127.0.0.1:3000/socket.io/socket.io.js 就是一个 js 文件 的地址了 。现在需要制作一个客户端的 index 页面,这个页面中,必须引用秘密 js 文件 。调用 io 函数,取得 socket 对象 。
index.html
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>客户端</title><script src=https://www.isolves.com/it/cxkf/bk/2020-10-14/"http://localhost:3000/socket.io/socket.io.js">