webSocket的自学案例

news2024/11/28 17:39:29

问:

请展示一个简单websocket案例?

回答:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>简单小例子</title>

</head>

<body>

<input type="text" id="inMessage"><button id="sendMessage">发送</button>

<div id="showText"></div>

<script>

var liwebsocket = new WebSocket("wss://echo.websocket.org");

liwebsocket.onopen = function () {

console.log("websocket is open")

// 当打开websocket是,使div的暂未websocket is open

document.getElementById("showText").innerHTML = "websocket is open!!!";

}

// 打开之后先接受一下输入框中的信息 并展示在 div中

liwebsocket.onmessage = function (e) {

document.getElementById("showText").innerHTML = e.data;

}

// 向websocket发送输入框信息

document.getElementById("sendMessage").onclick = function () {

//先获取发送的内容

var textValue = document.getElementById("inMessage").value;

// 发送

liwebsocket.send(textValue);

}

// 最后不要忘记关闭

liwebsocket.onclose = function () {

console.log("websocket is close!!!!");

}

</script>

</body>

</html>

问:

展示一个完整案例

回答:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebSocket 示例</title>
    <style>
        #showText {
            margin-top: 10px;
            padding: 10px;
            border: 1px solid #ddd;
            min-height: 50px;
        }
    </style>
</head>
<body>
    <h1>WebSocket 示例</h1>
    <input type="text" id="inMessage" placeholder="输入消息">
    <button id="sendMessage">发送</button>
    <div id="showText">等待连接...</div>

    <script>
        // 创建 WebSocket 对象并连接到回显服务器
        var ws = new WebSocket("wss://echo.websocket.org/");

        // 连接打开时触发
        ws.onopen = function () {
            console.log("WebSocket 连接已打开");
            document.getElementById("showText").innerHTML = "WebSocket 连接已打开!";
        };

        // 接收到消息时触发
        ws.onmessage = function (event) {
            document.getElementById("showText").innerHTML = "收到消息: " + event.data;
        };

        // 发送按钮点击事件处理
        document.getElementById("sendMessage").onclick = function () {
            var message = document.getElementById("inMessage").value;
            if (message) {
                ws.send(message);
                document.getElementById("showText").innerHTML = "发送消息: " + message;
            } else {
                document.getElementById("showText").innerHTML = "请输入消息后再发送!";
            }
        };

        // 连接关闭时触发
        ws.onclose = function () {
            console.log("WebSocket 连接已关闭");
            document.getElementById("showText").innerHTML = "WebSocket 连接已关闭!";
        };

        // 连接发生错误时触发
        ws.onerror = function (error) {
            console.error("WebSocket 错误: ", error);
            document.getElementById("showText").innerHTML = "WebSocket 发生错误!";
        };
    </script>
</body>
</html>

问:

websocket可以实现哪些功能?

回答:

WebSocket 是一种在客户端和服务器之间建立持久连接的协议,它允许双向通信。它的主要优点是减少了传统 HTTP 请求/响应模式中的开销和延迟。以下是 WebSocket 可以实现的一些常见功能:

1. 实时聊天应用

WebSocket 特别适合构建实时聊天应用,因为它能够维持一个持久的连接,使得消息能够即时传递。用户之间可以实时地发送和接收消息,无需刷新页面或进行轮询。

2. 实时数据更新

WebSocket 使得服务器能够主动推送数据到客户端,这对于实时更新非常有用。例如:

  • 金融市场数据:实时显示股票价格、货币汇率等。
  • 体育赛事:实时更新比赛分数、比赛进度等。

3. 实时游戏

WebSocket 适合用于多人在线游戏的实时通信。它能低延迟地传输游戏状态和玩家操作,使得游戏体验更加流畅。

4. 在线协作工具

在协作编辑文档或图像的应用程序中,WebSocket 可以实时同步多个用户的编辑操作。例如,Google Docs 和 Figma 都使用了类似的技术来同步用户的编辑。

5. 实时通知

WebSocket 可以用于推送实时通知,例如:

  • 社交媒体通知:接收新的评论、点赞等通知。
  • 系统监控:实时接收系统状态和警报。

6. 直播视频流

虽然 WebSocket 不是专门为视频流设计的,但它可以用于小规模的实时视频流应用。对于大规模的视频流,通常会使用专门的视频流协议和服务。

7. IoT(物联网)设备通信

WebSocket 可以用于物联网设备与服务器之间的实时通信。例如:

  • 智能家居设备:实时接收传感器数据或发送控制指令。
  • 健康监测设备:实时传输生理数据。

8. 客户端和服务器间的实时数据交换

例如,实时同步用户状态、活动日志等。这对于需要高频次数据交换的应用尤其有用。

9. 聊天机器人

WebSocket 可以用于构建聊天机器人与用户之间的实时对话接口,使得机器人能够即时响应用户的消息。

10. 实时投票或调查

用户可以实时提交投票或调查答案,WebSocket 可以用来动态更新结果并显示给所有参与者。

WebSocket 与 HTTP 的比较

  • HTTP:请求-响应模式,每次请求都需要重新建立连接,适合传统的网页和API调用。
  • WebSocket:持久连接,双向通信,适合需要实时更新和低延迟的应用场景。

通过 WebSocket,开发者可以实现许多需要实时或双向通信的应用,提高用户体验和系统效率

问:

请实现两个对话框的websocket聊天功能?

回答:

left.html



<!DOCTYPE html>
<html>

<head>
  <title>Left User</title>
</head>

<body>
  <h1>Left User</h1>
  <textarea id="messageInput" placeholder="Type a message..."></textarea>
  <button onclick="sendMessage()">Send</button>
  <div id="messages"></div>

  <script>
    const ws = new WebSocket('ws://localhost:8080');
    const messageInput = document.getElementById('messageInput');
    const messages = document.getElementById('messages');

    ws.onmessage = event => {
      if (event.data instanceof Blob) {
        const reader = new FileReader();
        reader.onload = () => {
          const message = document.createElement('div');
          message.textContent = `Right User: ${reader.result}`;
          messages.appendChild(message);
        };
        reader.readAsText(event.data);
      } else {
        const message = document.createElement('div');
        message.textContent = `Right User: ${event.data}`;
        messages.appendChild(message);
      }
    };

    function sendMessage() {
      const message = messageInput.value;
      ws.send(message);
      messageInput.value = '';
    }
  </script>
</body>

</html>

right.html




<!DOCTYPE html>
<html>

<head>
  <title>Right User</title>
</head>

<body>
  <h1>Right User</h1>
  <textarea id="messageInput" placeholder="Type a message..."></textarea>
  <button onclick="sendMessage()">Send</button>
  <div id="messages"></div>

  <script>
    const ws = new WebSocket('ws://localhost:8080');
    const messageInput = document.getElementById('messageInput');
    const messages = document.getElementById('messages');

    ws.onmessage = event => {
      if (event.data instanceof Blob) {
        const reader = new FileReader();
        reader.onload = () => {
          const message = document.createElement('div');
          message.textContent = `Left User: ${reader.result}`;
          messages.appendChild(message);
        };
        reader.readAsText(event.data);
      } else {
        const message = document.createElement('div');
        message.textContent = `Left User: ${event.data}`;
        messages.appendChild(message);
      }
    };

    function sendMessage() {
      const message = messageInput.value;
      ws.send(message);
      messageInput.value = '';
    }
  </script>
</body>

</html>

server.js




const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', ws => {
  ws.on('message', message => {
    // 广播消息到所有连接的客户端
    wss.clients.forEach(client => {
      if (client !== ws && client.readyState === WebSocket.OPEN) {
        client.send(message);
      }
    });
  });
});

console.log('WebSocket server is running on ws://localhost:8080');

实现结果:

左侧框发送聊天信息给右侧框

同理,右侧框也可以发送给左侧。

通过优化,仿照微信的实现效果:

完整代码:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Chat Window</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background-color: #f0f0f0;
    }
    .chat-container {
      display: flex;
      flex-direction: column;
      width: 100%;
      max-width: 400px;
      height: 100vh;
      border: 1px solid #ddd;
      border-radius: 8px;
      background-color: #fff;
      overflow: hidden;
    }
    .messages {
      flex: 1;
      padding: 10px;
      overflow-y: auto;
      border-bottom: 1px solid #ddd;
      display: flex;
      flex-direction: column;
    }
    .message {
      margin: 5px 0;
      padding: 5px 10px;
      border-radius: 15px;
      max-width: 100px; /* Adjusted to fit approximately two Chinese characters */
      word-wrap: break-word;
      box-sizing: border-box;
    }
    .left-user {
  background-color: #ffffff; /* 对调背景颜色 */
  align-self: flex-start;
  margin-right: auto;
  border: 1px solid #ddd; /* 对调边框颜色 */
  text-align: left;
}

.right-user {
  background-color: #e0f1e0; /* 对调背景颜色 */
  align-self: flex-end;
  margin-left: auto;
  border: 1px solid #c2e2c2; /* 对调边框颜色 */
  text-align: left;
}
    .input-container {
      display: flex;
      flex-direction: column;
      padding: 10px;
      border-top: 1px solid #ddd;
    }
    .input-container > div {
      margin-bottom: 10px;
    }
    textarea {
      width: 100%;
      padding: 10px;
      border-radius: 5px;
      border: 1px solid #ddd;
      resize: none;
      box-sizing: border-box;
    }
    button {
      padding: 10px 20px;
      border: none;
      border-radius: 5px;
      background-color: #007bff;
      color: white;
      cursor: pointer;
      font-size: 16px;
    }
    button:hover {
      background-color: #0056b3;
    }
  </style>
</head>

<body>
  <div class="chat-container">
    <div class="messages" id="messages"></div>
    <div class="input-container">
      <div>
        <textarea id="leftUserInput" placeholder="Left User: Type a message..."></textarea>
        <button onclick="sendMessage('left')">Send Left User Message</button>
      </div>
      <div>
        <textarea id="rightUserInput" placeholder="Right User: Type a message..."></textarea>
        <button onclick="sendMessage('right')">Send Right User Message</button>
      </div>
    </div>
  </div>

  <script>
    const messages = document.getElementById('messages');
    const leftUserInput = document.getElementById('leftUserInput');
    const rightUserInput = document.getElementById('rightUserInput');

    function sendMessage(user) {
      let messageContent;
      if (user === 'left') {
        messageContent = leftUserInput.value.trim();
        if (messageContent) {
          addMessage(messageContent, 'left-user');
          leftUserInput.value = '';
        }
      } else if (user === 'right') {
        messageContent = rightUserInput.value.trim();
        if (messageContent) {
          addMessage(messageContent, 'right-user');
          rightUserInput.value = '';
        }
      }
    }

    function addMessage(content, userClass) {
      const message = document.createElement('div');
      message.textContent = content;
      message.className = `message ${userClass}`;
      messages.appendChild(message);
      messages.scrollTop = messages.scrollHeight;
    }

    function handleKeyDown(event, user) {
      if (event.key === 'Enter' && !event.shiftKey) {
        event.preventDefault();
        sendMessage(user);
      }
    }

    leftUserInput.addEventListener('keydown', (event) => handleKeyDown(event, 'left'));
    rightUserInput.addEventListener('keydown', (event) => handleKeyDown(event, 'right'));
  </script>
</body>

</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2099617.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

记录游戏高光时刻!4款电脑录屏工具分享

虽然之前也录制过游戏&#xff0c;但是想来还是有不少朋友不知道如何录制一个高清游戏视频&#xff0c;我来和大家聊聊游戏直播和录屏的那些事儿。作为一个游戏主播&#xff0c;我尝试过很多录屏软件&#xff0c;今天就来分享一下我用过的四款录屏软件它们在录制游戏视频时的表…

Win32设备I/O详解

Windows设备 在Windows平台下&#xff0c;设备被定义为能够与之进行通信的任何东西。最常见的 I/O 设备包括&#xff1a;文件、文件流、目录、物理磁盘、卷、控制台缓冲区、磁带驱动器、通信资源、mailslot 和管道等。 平常我们使用的文件&#xff0c;目录都可以称之为设备。…

机床采集网关在汽车智能工厂中的应用及成效-天拓四方

随着工业4.0的浪潮席卷全球&#xff0c;智能化、数字化成为了制造业转型升级的关键词。在这一背景下&#xff0c;机床采集网关以其强大的数据采集、传输和处理能力&#xff0c;为企业的数字化转型提供了强有力的支持。本文将通过一个实际案例&#xff0c;详细介绍机床采集网关在…

数据结构:(LeetCode144)二叉树的前序遍历

给你二叉树的根节点 root &#xff0c;返回它节点值的 前序 遍历。 示例 1&#xff1a; 输入&#xff1a;root [1,null,2,3] 输出&#xff1a;[1,2,3] 解释&#xff1a; 示例 2&#xff1a; 输入&#xff1a;root [1,2,3,4,5,null,8,null,null,6,7,9] 输出&#xff1a;…

CUDA与TensorRT学习二:CUDA编程入门

文章目录 一、理解CUDA的grid和Block1&#xff09;第一个cuda项目 二、理解.cu和.cpp的相互引用及Makefile三、利用CUDA矩阵乘法(matmul)计算、Error Handle 及硬件信息获取1&#xff09;矩阵乘法2&#xff09;Error Handle3&#xff09;硬件信息获取 四、安装Nsight system an…

【APP自动化】Appium 环境搭建

1 基础环境 安装 node.js (1) 安装node.js 安装的是10版本&#xff0c;node-v10.16.0-x64&#xff0c;node.js安装比较简单&#xff0c;直接采用默认选项即可&#xff0c;路径的话&#xff0c;可以自己更改下。 (2) 添加Path环境变量 (3) 验证node.js是否安装成功 可以在CMD…

STM32 IIC

第一块&#xff1a;介绍协议规则&#xff0c;然后用软件模拟的形式来实现协议&#xff0c; 第二块&#xff1a;介绍STM32的IIC外设&#xff0c;然后用硬件来实现协议 因为IIC是同步时序的额&#xff0c;软件模拟协议也非常方便&#xff0c;像我们单片机一样&#xff0c;外挂芯…

零基础入门转录组数据分析——基因Wilcoxon秩和检验

零基础入门转录组数据分析——基因Wilcoxon秩和检验 目录 零基础入门转录组数据分析——基因Wilcoxon秩和检验1. 单基因Wilcoxon秩和检验的基础知识2. 基因Wilcoxon秩和检验&#xff08;Rstudio&#xff09;——代码实操2. 1 数据处理2. 2 基因Wilcoxon秩和检验2. 3 Wilcoxon秩…

FreeRTOS学习笔记—①堆与栈

在嵌入式系统中&#xff0c;堆与栈通常表示操作系统对进程占用的两种管理方式&#xff0c;而RTOS中栈更为重要&#xff0c;每一个链路都要有自己的栈。因此对堆和栈的概念进行了些区分和了解。以下是自己学习总结的一些&#xff0c;如有不对的地方请指正&#xff1a; &#xf…

算法打卡 Day25(二叉树)-修剪二叉搜索树 + 将有序数组转换为二叉搜索树 + 把二叉搜索树转换为累加树

文章目录 Leetcode 669-修剪二叉搜索树题目描述解题思路 Leetcode 108-将有序数组转换为二叉搜索树题目描述解题思路 Leetcode 538-把二叉搜索树转换为累加树题目描述解题思路 Leetcode 669-修剪二叉搜索树 题目描述 https://leetcode.cn/problems/trim-a-binary-search-tree…

elementUI——checkbox复选框监听不到change事件,通过watch监听来解决——基础积累

今天在写后台管理系统的时候&#xff0c;遇到一个需求&#xff0c;就是要求监听复选框的change事件&#xff0c;场景就是&#xff1a;两个复选框互斥&#xff0c;且可以取消勾选。 就是这两个复选框可以同时都不勾选&#xff0c;如果勾选的话&#xff0c;另一个一定要取消勾选。…

​如何通过Kimi强化论文写作中的数据分析?

在学术研究领域&#xff0c;数据分析是验证假设、发现新知识和撰写高质量论文的关键环节。Kimi&#xff0c;作为一款先进的人工智能助手&#xff0c;能够在整个论文写作过程中提供支持&#xff0c;从文献综述到数据分析&#xff0c;再到最终的论文修订。本文将详细介绍如何将Ki…

OceanBase 的ODP OBproxy 的记录

OceanBase 的ODP的路由说明一、简述为什么使用ODP的原因 &#xff08;强一致性情况下&#xff09; 1.分布式数据库在SQL解析这块存在本地执行计划&#xff0c;远程执行计划&#xff0c;分布式执行计划。 本地执行计划&#xff1a;整个SQL的表都在session所在的Observer 节点上。…

ABAP 结构体变量的嵌套INCLUDE TYPE 和 INCLUDE STRUCTURE

文章目录 创建程序语法格式程序测试AS SPFLI_NAME2 RENAMING WITH SUFFIX _NAME2 后缀变量的结构程序结构类型嵌套表和结构字段类型TYPES嵌套类型程序 创建程序 语法格式 程序测试 AS SPFLI_NAME2 RENAMING WITH SUFFIX _NAME2 后缀 变量的结构 程序 *&------------------…

Java进阶13讲__第六讲

算法&#xff1a; 冒泡排序 选择排序 二分查找 1. 冒泡排序 1.1 定义 1.2 代码示例 Java业务逻辑-1(冒泡排序)-CSDN博客https://blog.csdn.net/XiaomeiGuiSnJs/article/details/140880229 2. 选择排序 2.1 定义 2.2 代码示例 package cn.hdc.itWork.d5.d2;import java.uti…

【C语言】详解数组

文章目录 前言一、数组的概念二、一维数组1.一维数组的创建2.一维数组的初始化3. 一维数组的使用4.一维数组在内存中的存储 三、二维数组1.二维数组的创建2. 二维数组的初始化3. 二维数组的使用4.二维数组在内存中的存储 前言 一、数组的概念&#xff08;数组是一组相同类型元素…

精准设计与高效开发:用六西格玛设计DFSS实现新能源汽车开发突破

快速变化的市场需求和激烈的竞争迫使制造企业不得不持续创新和优化产品开发流程。如何在保证产品质量的前提下&#xff0c;加快产品开发周期&#xff0c;成为许多企业亟待解决的问题。六西格玛中的DFSS&#xff08;Design for Six Sigma&#xff09;模型提供了一种系统的方法&a…

维信小程序禁止截屏/录屏

一、维信小程序禁止截屏/录屏 //录屏截屏,禁用wx.setVisualEffectOnCapture({visualEffect:hidden});wx.setVisualEffectOnCapture(Object object) 测试安卓手机&#xff1a; 用户截屏&#xff0c;被禁用 用户录屏&#xff0c;录制的是空白内容/黑色内容的视频。 二、微信小…

RS-FS-N01风速变送器简明教程(485通信类型变送器)

该文章仅供参考&#xff0c;编写人不对任何实验设备、人员及测量结果负责&#xff01;&#xff01;&#xff01; 文章主要介绍变送器的硬件连接、软件配置、数据读写以温湿度计算。 1 硬件连接 2 软件配置 将变送器硬件部分正确连接后 打开“485 参数配置工具.exe” 对风速…

hello树先生——红黑树

红黑树 一.什么是红黑树二.红黑树的实现1.创建树节点结构2.插入功能的实现 三.提供一些常见二叉树接口四.进行平衡测试 一.什么是红黑树 红黑树是一种自平衡的二叉搜索树&#xff0c;具有以下特性&#xff1a; 节点颜色&#xff1a;每个节点要么是红色&#xff0c;要么是黑色。…