websocket

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请求的时候触发

websocket

 

 

 

前端搭建

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

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

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

websocket

前后端通信

前端socket:

on方法监听消息

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

emit方法触发消息

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

后端socket:

on方法监听消息

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

emit方法触发消息

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

 

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

websocket

上一篇:JS题库


下一篇:cube.js 响应内容压缩