html5使用Websocket

html5使用Websocket

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

前言

在即时通讯的交互方式中websocket是一个很使用的方式,本篇文章讲解在html5中使用websocket

1、html5中的websocket

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

2、创建一个 WebSocket 对象

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

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

3、监听 WebSocket 连接事件

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

4、监听 WebSocket 收到消息事件

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

5、监听 WebSocket 关闭事件

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

6、 监听 WebSocket 出错事件

javascript 复制代码
socket.addEventListener("error", function (event) {
        console.error("WebSocket error报错:", event);
      });

7、发送消息

javascript 复制代码
function sendMessage() {
      let message = document.getElementById("messageInput").value;
      if (message) {
        socket.send(message);
      }
    }

8、整体代码

javascript 复制代码
<!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>
相关推荐
玩电脑的辣条哥2 小时前
Python如何播放本地音乐并在web页面播放
开发语言·前端·python
ew452182 小时前
ElementUI表格表头自定义添加checkbox,点击选中样式不生效
前端·javascript·elementui
suibian52352 小时前
AI时代:前端开发的职业发展路径拓宽
前端·人工智能
Moon.92 小时前
el-table的hasChildren不生效?子级没数据还显示箭头号?树形数据无法展开和收缩
前端·vue.js·html
垚垚 Securify 前沿站2 小时前
深入了解 AppScan 工具的使用:筑牢 Web 应用安全防线
运维·前端·网络·安全·web安全·系统安全
工业甲酰苯胺5 小时前
Vue3 基础概念与环境搭建
前端·javascript·vue.js
bdawn6 小时前
深度集成DeepSeek大模型:WebSocket流式聊天实现
python·websocket·openai·api·实时聊天·deepseek大模型·流式输出
mosquito_lover16 小时前
怎么把pyqt界面做的像web一样漂亮
前端·python·pyqt
柴柴的小记9 小时前
前端vue引入特殊字体不生效
前端·javascript·vue.js
柠檬豆腐脑9 小时前
从前端到全栈:新闻管理系统及多个应用端展示
前端·全栈