websocket（简介，数据交互，分房间群聊）

最新推荐文章于 2024-06-05 20:11:30 发布

歪大梨

最新推荐文章于 2024-06-05 20:11:30 发布

阅读量810

点赞数

分类专栏：前端文章标签： websocket javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_64037609/article/details/127525462

版权

前端专栏收录该内容

82 篇文章

订阅专栏

定义

websocket是一个互联网传输协议（http也是一个互联网传输协议）

websocket是一个持续性互联网传输协议不像http

http是一个单次传输协议每次想进行数据交互都必须先建立浏览器和服务器之间的连接并且这个连接会在数据交互结束之后断开
websocket是一个持续性传输协议相当于在服务器和浏览器之间建立起了一个持续存在的连接我们可以在这个连接之上进行无限制的数据交互

websocket的应用场景

websocket协议多用于客服系统、聊天室系统、直播系统等

websocket的开发

在node中我们使用一个第三方模块来实现websocket服务器的开发这个模块叫做——socket.io

编写websocket服务器的步骤如下

1.下载第三方模块socket.io：npm i socket.io@2
2.引入并使用
- ```
let socket = require("socket.io");
```

3.包装websocket服务器

let express = require("express");
let app = express();
//声明一个变量 接收listen方法函数调用表达式的值（返回值） 这个返回值就是node服务器
let server = app.listen("3000",()=>{
    console.log("服务器正在运行...")
})

//引入websocket
let websocket = require("socket.io");
//上述server就是我们获取到的node服务器  我们下面 使用websocket来将其包装为socket服务器
//我们引入的websocket 是一个函数 这个函数就可以将node服务器包装为socket服务器
//用法：websocket(node服务器)
let io = websocket(server);
//给socket服务器对象 添加connection(连接)事件 这个事件用来监听是否有浏览器和我的socket服务器建立了连接  任何一个浏览器和socket服务器建立了连接 都会触发connection事件
//node中添加事件的写法 类似于jquery中的on方法绑定事件
io.on("connection",web=>{
    //事件处理函数中的第一个形参（web） 表示连接对象
    console.log("建立连接成功")
})

浏览器连接socket服务器的代码步骤如下
- 1.任何一个浏览器页面如果想访问websocket服务器都需要先引入websocket服务器提供的一个js文件，这个js文件的引用地址为——"websocket服务器地址/socket.io/socket.io.js"
- 2.引入上述js文件后就可以得到该js文件提供的一个函数——io 这个io函数就是用来建立和socket服务器之间的连接并进行数据交互。
- 3.建立连接：io("socket服务器地址")
  - ```
  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
  </head>
  <body>
      
      <script src="http://127.0.0.1:3000/socket.io/socket.io.js"></script>
      <script>
          //建立连接
          io("http://127.0.0.1:3000")
      </script>
  </body>
  </html>
```
websocket服务器和浏览器之间的数据交互方式
- websocket服务器和浏览器之间的交互方式为 —— 发布和订阅模式
- 也就是说服务器和浏览器二者进行交互的时候一定是一方发布数据另一方订阅数据数据才能成功进行交互缺少任意一个步骤都无法成功交互数据
- 发布订阅的写法
  - ```
  //在服务器和浏览器中 都是相同的
  //发布
  连接对象.emit("自定义事件名",要发布的数据);
  //订阅 是通过给连接对象 添加对应的自定义事件 来实现接收发布的数据的效果
  连接对象.on("对应的自定义事件名",res=>{
      //res形参就是接收到的发布数据
  })
```

websocket服务器向浏览器广播数据

websocket服务器进行广播使用的对象不同不再使用连接对象而是使用 socket服务器对象.sockets进行发布就可以实现广播效果

let express = require("express");
let app = express();
//声明一个变量 接收listen方法函数调用表达式的值（返回值） 这个返回值就是node服务器
let server = app.listen("3000",()=>{
    console.log("服务器正在运行...")
})

//引入websocket
let websocket = require("socket.io");
//上述server就是我们获取到的node服务器  我们下面 使用websocket来将其包装为socket服务器
//我们引入的websocket 是一个函数 这个函数就可以将node服务器包装为socket服务器
//用法：websocket(node服务器)
let io = websocket(server);
//给socket服务器对象 添加connection(连接)事件 这个事件用来监听是否有浏览器和我的socket服务器建立了连接  任何一个浏览器和socket服务器建立了连接 都会触发connection事件
//node中添加事件的写法 类似于jquery中的on方法绑定事件
io.on("connection",web=>{
    //事件处理函数中的第一个形参（web） 表示连接对象
    console.log("建立连接成功");
    
    //广播发布
    io.sockets.emit("自定义事件名",要发布的数据)
})

分房间群聊

socket服务器可以实现分房间群聊前提是需要浏览器提交房间号服务器就可以将当前用户加入到对应的房间中进行群聊了

let express = require("express");
let app = express();
//声明一个变量 接收listen方法函数调用表达式的值（返回值） 这个返回值就是node服务器
let server = app.listen("3000",()=>{
    console.log("服务器正在运行...")
})

//引入websocket
let websocket = require("socket.io");
//上述server就是我们获取到的node服务器  我们下面 使用websocket来将其包装为socket服务器
//我们引入的websocket 是一个函数 这个函数就可以将node服务器包装为socket服务器
//用法：websocket(node服务器)
let io = websocket(server);
//给socket服务器对象 添加connection(连接)事件 这个事件用来监听是否有浏览器和我的socket服务器建立了连接  任何一个浏览器和socket服务器建立了连接 都会触发connection事件
//node中添加事件的写法 类似于jquery中的on方法绑定事件
io.on("connection",web=>{
    //事件处理函数中的第一个形参（web） 表示连接对象
    console.log("建立连接成功");
    
    //广播发布
    io.sockets.emit("自定义事件名",要发布的数据);
    //接收房间号 socket服务器接收数据的方式是：连接对象.handshake.query.要接受的数据的键名
    let id = web.handshake.query.id;
    //判断id如果提交了 就给用户加入到指定id的房间去 进行群聊
    //join： 用法：连接对象.join(房间id，()=>{ 加入成功后会执行的回调函数 })
    web.join(id,()=>{
        web.emit("welcome","欢迎进入“+id+”号直播间");
        //针对指定房间发布信息
        服务器对象.to(id).emit("welcome","欢迎进入“+id+”号直播间");
    })
})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--引入socket.io.js-->
    <script src="http://127.0.0.1:3000/socket.io/socket.io.js"></script>
    <script>
        //建立连接 并提交房间号
        let web = io("http://127.0.0.1:3000?id=1");
    </script>
</body>
</html>