websocket

Posted 2021-05-18 y

websocket

webSocket是H5中新增的，与HTTP协议是同级别的，只不过它是有状态的（有持久连接）

HTTP协议：

　　前端发送请求，后端得到响应并返回数据，断开连接，之后想要再次发送新的请求，就要再次建立连接通道才能发送请求

webSocket:

　　前端发送请求，后端得到响应并返回数据，就保持连接，之后想要再次发送新的请求，就可以使用已经建立起来的通道再次发送请求

socket.io

socket.io是nodejs第三方模块文件，用于统一浏览器发送socket请求的方式

下载：npm install socket.io

使用socket.io

let socket_io = require(\'socket.io’);

socket_io(server);

在地址栏中输入：http://localhost:3000/socket.io/socket.io.js 就能得到一个socket文件

与express搭配使用

socket不能和express搭配使用，想要搭配使用只能将express应用转为http服务

第一步：通过express创建应用程序　　let app = express();

第二步：将express应用转为http服务　　let server = http.createServer(app);

第三步：通过socket处理http服务　　let io = socket(server);

socket 服务

后台搭建

第一步：执行socket.io （以上三步）

第二步：通过变量io监听connection事件（通过on方法），该事件会在前端发送socket请求的时候触发

 

 

 

前端搭建

第一步：通过script标签引入socket.io.js文件

第二步：当引入socket.io.js文件之后，向全局暴露一个io变量 。要执行io方法， 并且要监听connect方法

　　　　当我们执行io方法的时候，就会自动发送一个socket请求。这样后台就可以接收到信息。

前后端通信

前端socket:

on方法监听消息

　　第一个参数表示消息名称 第二个参数是执行的函数

emit方法触发消息

　　第一个参数是消息名称 从第二个参数开始，是传递的数据

后端socket:

on方法监听消息

　　第一个参数表示消息名称 第二个参数是执行的函数，通过回调函数中的参数调用on方法

emit方法触发消息

　　第一个参数是消息名称 从第二个参数开始，是传递的数据，通过回调函数中的参数调用emit方法

 

注意：前后端发布和接收的消息名称要一致