html5使用Websocket

作者：花生_TL007 | 2024-03-20 03:35:58

踩

html5使用Websocket

前言
1、html5中的websocket
2、创建一个 WebSocket 对象
3、监听 WebSocket 连接事件
4、监听 WebSocket 收到消息事件
5、监听 WebSocket 关闭事件
6、监听 WebSocket 出错事件
7、发送消息
8、整体代码

前言

在即时通讯的交互方式中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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/花生_TL007/article/detail/270394

html5使用Websocket

html5使用Websocket

前言

1、html5中的websocket

2、创建一个 WebSocket 对象

3、监听 WebSocket 连接事件

4、监听 WebSocket 收到消息事件

5、监听 WebSocket 关闭事件

6、 监听 WebSocket 出错事件

7、发送消息

8、整体代码

6、监听 WebSocket 出错事件