Websock Demo(一)前端代码

news/2025/2/25 12:58:32


<html>
<head>
  <meta charset="UTF-8">
  Netty WebSocket 时间服务器
</head>
<br/>
<body>
<br>
<script type="text/javascript">
  var socket;
  if (!window.WebSocket) {
    window.WebSocket = window.MozWebSocket;
  }
  if (window.WebSocket) {
  
    socket = new WebSocket("ws://ip:端口/base/websocket"); 
    socket.onmessage = function (event) {
      console.log("xxx" + event)
      var ta = document.getElementById('responseText');
      ta.value = ta.value + '\n' + event.data;
    };
    socket.onopen = function (event) {
      var ta = document.getElementById('responseText');
      ta.value = "打开WebSocket服务正常,浏览器支持WebSocket!";
    };
    socket.onclose = function (event) {
      var ta = document.getElementById('responseText');
      ta.value = "WebSocket 关闭!";
    }
  } else {
    alert("抱歉,您的浏览器不支持WebSocket协议!");
  }

  function send(message) {
    if (!window.WebSocket) {
      return;
    }
    if (socket.readyState == WebSocket.OPEN) {
      socket.send(message);
    }else {
      alert("WebSocket连接没有建立成功!");
    }
  }
</script>
<form οnsubmit="return false;">
 
  <input type="text" name="message" value="默认值">
  <br/><br/>
  <input type="button" value="发送WebSocket请求消息" οnclick="send(this.form.message.value)">
  <hr color="blue"/>
  <h3>服务端返回的应答消息</h3>
  <textarea id="responseText" style="width:500px; height: 300px;"></textarea>
</form>
</body>
</html>


http://www.niftyadmin.cn/n/5865528.html

相关文章

系统架构设计:软件工程部分知识概述

软件工程:构建高质量软件的基石 在当今数字化时代,软件已渗透到我们生活的方方面面,从日常的手机应用到复杂的工业控制系统,软件的质量和性能直接影响着用户体验和业务发展。而软件工程,作为一门研究和应用如何高效、可靠地开发软件的学科,对于打造优质软件产品起着至关…

JSON Web Token在登陆中的使用

JWT&#xff08;JSON Web Token&#xff09;是一种开放标准&#xff08;RFC 7519&#xff09;&#xff0c;用于在网络应用环境间安全地传递声明。它的主要用途是身份验证和信息交换。在微服务架构中&#xff0c;JWT 作为认证机制非常常见&#xff0c;特别是与 API 网关结合使用…

智慧后勤的消防管理:豪越科技为安全护航

智慧后勤消防管理难题大揭秘&#xff01; 在智慧后勤发展得如火如荼的当下&#xff0c;消防管理却暗藏诸多难题。传统模式下&#xff0c;消防设施分布得那叫一个散&#xff0c;就像一盘散沙&#xff0c;管理起来超费劲。人工巡检不仅效率低&#xff0c;还容易遗漏&#xff0c;不…

明日方舟一键端+单机+联网+安装教程+客户端apk

为了学习和研究软件内含的设计思想和原理&#xff0c;本人花心血和汗水带来了搭建教程&#xff01;&#xff01;&#xff01; 教程不适于服架设&#xff0c;严禁服架设&#xff01;&#xff01;&#xff01;请牢记&#xff01;&#xff01;&#xff01; 教程仅限学习使用&…

书生大模型实战营14-MindSearch深度解析实践

文章目录 L2——进阶岛MindSearch深度解析实践1 MindSearch 简介2 开发环境配置2.1. 打开codespace主页&#xff0c;选择Blank模板进行创建2.2. 创建conda环境隔离并安装依赖 3. 获取硅基流动API KEY4. 启动MindSearch4.1. 启动后端4.2. 启动前端 5. 部署到自己的 HuggingFace …

大数据开发平台的框架

根据你的需求&#xff0c;以下是从 GitHub 推荐的 10 个可以实现大数据开发平台的项目&#xff1a; 1. Apache Spark Apache Spark 是一个开源的分布式计算框架&#xff0c;适用于大规模数据处理和分析。它提供了强大的数据处理能力&#xff0c;支持实时数据处理、机器学习和…

用PyTorch从零构建 DeepSeek R1:模型架构和分步训练详解

DeepSeek R1 的完整训练流程核心在于&#xff0c;在其基础模型 DeepSeek V3 之上&#xff0c;运用了多种强化学习策略。 本文将从一个可本地运行的基础模型起步&#xff0c;并参照其技术报告&#xff0c;完全从零开始构建 DeepSeek R1&#xff0c;理论结合实践&#xff0c;逐步…

Qt中C++与QML交互从原理、方法与实践陷阱深度解析

在我们使用Qt开发中&#xff0c;现在以及普遍通过 C 与 QML 的交互&#xff0c;将 C 的强大功能与 QML 的界面设计优势相结合&#xff0c;既保证了应用程序的性能和稳定性&#xff0c;又能快速实现美观、易用的用户界面。接下来专门讲下C与QML交互原理、方法与实践中的一些陷阱…