首页 > Web开发 > 详细

websocket

时间:2021-05-18 23:06:39      阅读:24      评论:0      收藏:0      [点我收藏+]

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方法

 

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

websocket

原文:https://www.cnblogs.com/yess/p/14782862.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!