• html5使用Websocket

    html5使用Websocket

    前言

    在即时通讯的交互方式中websocket是一个很使用的方式，本篇文章讲解在html5中使用websocket
    在这里插入图片描述

    1、html5中的websocket

    html5是自带websocket的我们可以直接使用但是websocket 是不支持请求头的我们可以使用websocket提供的协议头将需要给后台的信息进行携带

    2、创建一个 WebSocket 对象

    socket = new WebSocket("ws://192.168.0.7:8081",['协议头带的信息']);

//协议头也可以支持字符串形式的发送
socket = new WebSocket("ws://192.168.0.7:8081",'协议头带的信息');

    • 1
    • 2
    • 3
    • 4

    3、监听 WebSocket 连接事件

    socket.addEventListener("open", function (event) {
        console.log("连接事件成功:", event);
      });

    • 1
    • 2
    • 3

    4、监听 WebSocket 收到消息事件

    socket.addEventListener("message", function (event) {
        console.log("接收到的消息事件:", event.data);
        document.getElementById("wbHtml").innerHTML = "event.data";
      });

    • 1
    • 2
    • 3
    • 4

    5、监听 WebSocket 关闭事件

    socket.addEventListener("close", function (event) {
        console.log("出错了关闭WebSocket:", event);
        document.getElementById("cWHtml").innerHTML = event;
      });

    • 1
    • 2
    • 3
    • 4

    6、 监听 WebSocket 出错事件

    socket.addEventListener("error", function (event) {
        console.error("WebSocket error报错:", event);
      });

    • 1
    • 2
    • 3

    7、发送消息

    function sendMessage() {
      let message = document.getElementById("messageInput").value;
      if (message) {
        socket.send(message);
      }
    }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    8、整体代码

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>WebSocket 示例</title>
  </head>
  <body>
    <h1>WebSocket 示例</h1>
    <input type="text" id="messageInput" placeholder="请输入要发送的信息" />
    <button onclick="sendMessage()">发送消息</button>
  </body>
  <script>

    // 1. 创建一个 WebSocket 对象
    let socket;
    function cL() {
      // 1. 创建一个 WebSocket 对象
      socket = new WebSocket("ws://192.168.2.7:8081" "juName=username");

      // 2. 监听 WebSocket 连接事件
      socket.addEventListener("open", function (event) {
        console.log("连接事件成功:", event);
      });
      // 3. 监听 WebSocket 收到消息事件
      socket.addEventListener("message", function (event) {
        console.log("接收到的消息事件:", event.data);
        document.getElementById("wbHtml").innerHTML = "event.data";
      });
      // 4. 监听 WebSocket 关闭事件
      socket.addEventListener("close", function (event) {
        console.log("出错了关闭WebSocket:", event);
        document.getElementById("cWHtml").innerHTML = event;
      });
      // 5. 监听 WebSocket 出错事件
      socket.addEventListener("error", function (event) {
        console.error("WebSocket error报错:", event);
      });
    }

    // 6、webSocket发送消息
    function sendMessage() {
      let message = document.getElementById("messageInput").value;
      if (message) {
        socket.send(message);
      }
    }

    cL();
  </script>
</html>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
  • 相关阅读:
    远程登录云上显卡(英伟达RTX5000)的主机，解决游戏应用帧率降低的问题
    RabbitMQ: topic 结构
    SMART 200 PLC S型速度曲线应用(梯形图算法优化)
    Hi3516DV500 SVP_NNN添加opencv库记录
    Easyx图片操作
    Linux基础操作命令详解
    手机备忘录怎么扫描图片上的文字
    如何用Python快速生成SQL语句？
    【面试小姿势】数据库设计的三大范式及其应用
    XXL-Job集群部署
  • 原文地址：https://blog.csdn.net/m0_50207524/article/details/136758145