WebSocket实现广播

最新推荐文章于 2023-07-27 10:36:33 发布

猿音

最新推荐文章于 2023-07-27 10:36:33 发布

阅读量5.6k

点赞数 4

分类专栏： WebSocket 笔记文章标签： websocket js nodejs

本文链接：https://blog.csdn.net/weixin_43348064/article/details/106507746

版权

笔记同时被 2 个专栏收录

24 篇文章 0 订阅

订阅专栏

WebSocket

1 篇文章 0 订阅

订阅专栏

一、什么是WebSocket

WebSocket是HTML5一种新的协议，是一种网络通讯协议，该协议最大的特点是：服务器主动可以向客户端推送消息，当然客户端也可以主动向服务器发送信息，是真正的平等双向对话。之所以使用WebSocket的原因是：http协议只能由客户端向服务器发送消息。

二、socket、WebSocket、socket.io三者的区别

1，socket：是传输控制层协议
2，WebSocket：是应用层协议
3，socket：是一个为浏览器与服务器之间提供实时、双向、基于事件的通信软件库。

在这里插入图片描述

三、WebSocket的优点

1，数据格式比较轻量，通讯高效
2，没有同源现制，客户端可以与任何服务器通讯
3，协议标识符为ws(如果加密则为wws)

四、实现WebSocket的基本原理

在这里插入图片描述

五、实现广播案例

Node.js服务器：

1，安装socket.io

npm install --save socket.io

2，创建app.js，

//创建HTTP服务器
const app = require("http").createServer();
//将HTTP服务器注入到WebSocket服务器
const IO = require("socket.io")(app);
//指定HTTP的监听端口
app.listen(5000, () => {
  console.log("ok");
});

client客户端：

1.引入socket.io的客户端脚本文件
2.创建socket客户端
var client = io(“ws://websocket服务器地址”)
说明:只要引入了socket.io的客户端脚本文件，会自动暴露一个名称为io的函数

使用方法建立连接

Node.js服务器
on()方法

on()方法用于实现根据指定的事件来注册一个函数(监听客户端的事件，然后执行相关的操作)，其语法结构是：
client.on(“事件名称”,([data[,…]])=>{
…
})

server.on(“connect/connection”)事件

该事件在客户端连接到服务器时触发，其语法结构是：
server.on(“connect/connection”,(client)=>{
//client代表是当前连接到服务器的客户端
});

emit()方法

emit()方法用于实现服务器向客户端广播事件，其语法结构是：
server.emit(“事件名称”[,数据])

Node.js服务器的代码示例

//创建HTTP服务器
const app = require("http").createServer();
//将HTTP服务器注入到WebSocket服务器
const IO = require("socket.io")(app);
//指定HTTP的监听端口
app.listen(5000, () => {
  console.log("ok");
});
//该事件在客户端连接到服务器时触发
IO.on("connect", (client) => {
  //接收客户端发送的事件和数据
  client.on("send message", (data) => {
    // 广播出去的事件名和数据
    IO.emit("borst message", { message: data });
  });
});

client客户端：
emit()方法

emit()方法用于实现客户端向服务器广播事件，其语法结构是：
client.emit(“事件名称”[,数据])

on()方法

用于实现根据指定的事件来注册一个函数(监听到服务器的事件，然后执行相关的操作)，其语法结构是：
client.on(“事件名称”,([data[,…]])=>{
…
})

client客户端的代码示例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>微信聊天室</title>
    <link rel="stylesheet" href="styles/normalize.css" />
    <link rel="stylesheet" href="styles/reset.css" />
    <link rel="stylesheet" href="styles/chart.css" />
    <link rel="stylesheet" href="styles/char.css" />
  </head>

  <body>
    <div id="chart-container">
      <div class="chart-user-list" id="chart-user-list">
        <div class="user-item" id="user_img">
          <img src="images/avatar/15.jpg" alt="" />
          未知名
        </div>
      </div>
      <div class="chart-main-area">
        <div class="chart-main-title">
          <h1>
            微K聊天室(<span id="userNumber">15</span>人)-<span
              id="currentUser"
            ></span>
          </h1>
        </div>
        <!-- 聊天内容列表开始 -->
        <div class="chart-list" id="chart-list"></div>
        <!-- 聊天内容列表结束 -->
        <div class="chart-form">
          <div>
            <textarea class="chart-form-message" id="message"></textarea>
          </div>
          <div>
            <input
              type="button"
              id="send"
              class="chart-form-send"
              value="发表"
              onclick="send()"
            />
          </div>
        </div>
      </div>
    </div>
    <script src="./scripts/socket.io.js"></script>
    <script>
      var client = io("ws://127.0.0.1:5000");
      console.log(client);
      //获取聊天室
      var chartListr = document.getElementById("chart-list");
      //随机分配id
      var id = parseInt(Math.random() * 12);
      console.log(id);
      function send() {
        //获取输入框的节点,并获取输框的文本
        var messageEle = document.getElementById("message");

        // 将自己聊天信息展示在聊天窗口的右侧
        var br = document.createElement("div");
        br.className = "chart-item";
        var messageVal = messageEle.value;
        br.innerHTML = `
                 <div class="user-right">
                   <img src="images/avatar/${id}.jpg" alt="" />
                 </div>
                 <div class="user-message-right">${messageVal}</div>
              `;
        chartListr.appendChild(br);

        // 自定义事件：send message;
        // 自定义事件描述：代表客户端向Websocket服务器发送的消息
        // 发送
        client.emit("send message", { message: messageVal, code: id });
        //发送完成后清除聊天输入框
        messageEle.value = "";
      }
      console.log(id);

      // 接收服务器自动发送过来的数据 与发送过来的事件名要一值
      client.on("borst message", (data) => {
        console.log(data.message);
        //如何和自己的id不一致就是接收来的信息
        //接收来的信息放在右侧，并且不显示在发送人的聊天框里
        if (data.message.code != id) {
          var br = document.createElement("div");
          br.className = "chart-item";
          br.innerHTML = `
                 <div class="user-face">
                   <img src="images/avatar/${data.message.code}.jpg" alt="" />
                 </div>
                 <div class="user-message">${data.message.message}</div>
               `;
          chartListr.appendChild(br);
        }
      });
    </script>
  </body>
</html>

注意：

请使用Live Server插件打开客户端，vscode在扩展中直接搜Live Server 即可下载。其他编辑器请百度查找。同时打开多个客户端就可以实现模拟多人聊天，由于没有真正的数据库，所使用的都是假数据，一刷新就会变。

效果图
在这里插入图片描述

下载源代码请点击此处

猿音

关注

4
点赞
踩
9

收藏

觉得还不错? 一键收藏
2
评论
WebSocket实现广播

一、什么是WebSocketWebSocket是HTML5一种新的协议，是一种网络通讯协议，该协议最大的特点是：服务器主动可以向客户端推送消息，当然客户端也可以主动向服务器发送信息，是真正的平等双向对话。之所以使用WebSocket的原因是：http协议只能由客户端向服务器发送消息。二、socket、WebSocket、socket.io三者的区别1，socket：是传输控制层协议2，WebSocket：是应用层协议3，socket：是一个为浏览器与服务器之间提供实时、双向、基于事件的通信软
复制链接

扫一扫