当前位置： 首页 > news >正文

webSocket前后端交互pc端版

news 2026/3/31 6:23:38

前端代码

<!--* @Author: 第一好帅@宝* @Date: 2023-08-29 16:12:26* @LastEditTime: 2023-08-29 16:54:50* @FilePath: \websocket\ceshi.html
-->
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div class="msg"></div><input type="text"><button>发送</button><button class="bu">关闭连接</button><div class="box"></div><script>let inp = document.querySelector('input')let but = document.querySelector('button')let bu = document.querySelector('.bu')let ws = new WebSocket('ws://localhost:8001')console.log(ws);//初始化连接ws.onopen = function () {document.querySelector('.msg').innerHTML = '<h1>连接成功!</h1>'console.log('连接成功触发函数');ws.send('第一次连接')}//服务器关闭ws.onclose = function (e) {document.querySelector('.msg').innerHTML = '<h1>服务器关闭!</h1>'console.log('服务器关闭');}//连接出错ws.onerror = function (e) {document.querySelector('.msg').innerHTML = '<h1>连接出错了!</h1>'console.log('连接出错了');}//服务器返回数据触发函数ws.onmessage = function (e) {console.log(e.data);document.querySelector('.box').innerHTML = e.data}//向后端发送消息but.addEventListener('click', function () {if (inp.value.trim() != '') {ws.send(inp.value)}})//断开连接bu.addEventListener('click', function () {ws.close()})</script>
</body></html>

后端代码，使用nodejs

npm i nodejs-websocket
/** @Author: 第一好帅@宝* @Date: 2023-08-29 15:52:49* @LastEditTime: 2023-08-29 16:48:17* @FilePath: \node\node.js*/
var ws = require('nodejs-websocket');console.log("开始建立连接...");var server = ws.createServer(function (conn) {conn.on("connect", function (code) {console.log("开启连接" + code);});conn.on("text", function (result) {console.log("收到的信息为:" + result); //由Webtest.html中传来data let a=resultif (result == 1) {a="飞哥" //发送"success"至Webtest.html} else if (result == 2) {a="帆姐" //发送"success"至Webtest.html} else if (result == 3) {a='东哥'}else if(result==4){a="阳哥"}//向前端发送消息conn.sendText('服务器返回数据：'+a);});conn.on("close", function (code) {console.log("关闭连接")});conn.on("error", function (code) {console.log("异常关闭")});
}).listen(8001);console.log("WebSocket连接建立完毕");

运行 node xx.js

相关文章：

webSocket前后端交互pc端版

前端代码 <!--* Author: 第一好帅宝* Date: 2023-08-29 16:12:26* LastEditTime: 2023-08-29 16:54:50* FilePath: \websocket\ceshi.html --> <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name&…...

编程日记 2023/8/30 6:10:34

Java-day13(枚举与注解)

枚举与注解 枚举 1.自定义枚举 如果枚举只有单个成员&#xff0c;则可以作为单例模式的实现方式 public class test{ public static void main(String[] args) { Season spring Season.spring;System.out.println(spring);spring.show();System.out.println(…...

编程日记 2023/8/30 6:09:33

vue PDF或Word转换为HTML并保留原有样式

方法一 要将PDF或Word转换为HTML并保留原有样式&#xff0c;可以使用pdfjs-dist和mammoth.js这两个库。首先需要安装这两个库&#xff1a; npm install pdfjs-dist mammoth.js然后在Vue项目中使用这两个库进行转换&#xff1a; import * as pdfjsLib from pdfjs-dist; impor…...

编程日记 2023/8/30 6:08:31

华硕笔记本摄像头倒置怎么办？华硕笔记本摄像头上下颠倒怎么调整

笔记本电脑相较于台式电脑&#xff0c;更易携带&#xff0c;解决了很大一部分人的使用需求。但是笔记本电脑也存在很多不足&#xff0c;比如华硕笔记本电脑就经常会出现摄像头倒置的错误&#xff0c;出现这种问题要如何修复呢&#xff1f;下面就来看看详细的调整方法。 华硕笔记…...

编程日记 2023/8/30 6:07:30

本地套接字通信

1.本地套接字 本地套接字的作用&#xff1a;本地的进程间通信 有关系的进程间的通信 没有关系的进程间的通信 本地套接字实现流程和网络套接字类似&#xff0c;一般采用TCP的通信流程 2.本地套接字通信的流程 - tcp // 服务器端 1.创建监听的套接字int lfd socket(AF_U…...

编程日记 2023/8/30 6:06:29

数据结构（Java实现）-优先级队列(堆)

队列是一种先进先出(FIFO)的数据结构&#xff0c;但有些情况下&#xff0c;操作的数据可能带有优先级&#xff0c;一般出队 列在这种情况下&#xff0c;数据结构应该提供两个最基本的操作&#xff0c;一个是返回最高优先级对象&#xff0c;一个是添加新的对象。 这种数据结构就…...

编程日记 2023/8/30 6:05:28

算法通关村第8关【黄金】| 寻找祖先问题

思路&#xff1a;递归三部曲 第一步&#xff1a;确定参数和返回值 题目要求找到指定的结点&#xff0c;就需要返回结点。 题目又涉及到p,q就需要传入p,q&#xff0c;需要遍历传入root 第二步&#xff1a;确定终止条件 当遍历到结点为空说明到底没找到返回空 或者遍历到p,…...

编程日记 2023/8/30 6:04:27

栈和队列（详解）

一、栈 1.1、栈的基本概念 1.1.1、栈的定义 栈&#xff08;Stack&#xff09;&#xff1a;是只允许在一端进行插入或删除的线性表。首先栈是一种线性表&#xff0c;但限定这种线性表只能在某一端进行插入和删除操作。 栈顶&#xff08;Top&#xff09;&#xff1a;线性表允许…...

编程日记 2023/8/30 6:03:26

iOS开发Swift-3-UI与按钮Button-摇骰子App

1.创建新项目Dice 2.图标 删去AppIcon&#xff0c;将解压后的AppIcon.appiconset文件拖入Assets包。 3.将素材点数1-6通过网页制作成2x&#xff0c;3x版本并拖入Asset。 4.设置对应的UI。 5.拖入Button组件并设置style。 6.Ctrl加拖拽将Button拖拽到ViewController里&#xff0…...

编程日记 2023/8/30 6:02:25

1、[春秋云镜]CVE-2022-32991

文章目录 一、相关信息二、解题思路&#xff08;手注&#xff09;三、通关思路&#xff08;sqlmap&#xff09; 一、相关信息 靶场提示&#xff1a;该CMS的welcome.php中存在SQL注入攻击。 NVD关于漏洞的描述&#xff1a; 注入点不仅在eid处&#xff01;&#xff01;&#xff…...

编程日记 2023/8/30 6:01:24

pdf如何删除其中一页？了解一下这几种删除方法

pdf如何删除其中一页&#xff1f;随着电子文档的广泛应用&#xff0c;PDF已成为最常见的文档格式之一。然而&#xff0c;有时候你可能会发现&#xff0c;你的PDF文档中包含了一些多余的页面&#xff0c;或者你需要删除其中的某一页。那么&#xff0c;该如何删除PDF中的页面呢&a…...

编程日记 2023/8/30 6:00:23

PO设计模式是selenium自动化测试中最佳的设计模式之一

Page Object Model&#xff1a;PO设计模式是selenium自动化测试中最佳的设计模式之一&#xff0c;主要体现在对界面交互细节的封装&#xff0c;也就是在实际测试中只关注业务流程就OK了传统的设计中&#xff0c;在新增测试用例之后&#xff0c;代码会有以下几个问题&#xff1a…...

编程日记 2023/8/30 5:59:21

yolov8使用C++推理的流程及注意事项

1.下载yolov8项目源码GitHub - ultralytics/ultralytics: NEW - YOLOv8 &#x1f680; in PyTorch > ONNX > OpenVINO > CoreML > TFLite 2.下载opencvReleases - OpenCV,建议版本>4.7.0,选择下载源码&#xff0c; windows版本由于使用的编译器与我们所使用的m…...

编程日记 2023/8/30 5:58:20

深度思考计算机网络面经之二

HTTP2和1.1的区别 HTTP 2.0 和 HTTP 1.1 相比有哪些优势呢&#xff1f; HTTP1.1的队头阻塞问题 服务器必须按照请求接收的顺序来响应&#xff0c;为什么 是因为传统的1.1中没有特定字段来区分一个请求属于哪个&#xff0c;只能按照请求的物理顺序返回&#xff0c; HTTP2解…...

编程日记 2023/8/30 5:57:19

老年人跌倒智能识别算法 opencv

老年人跌倒智能识别算法通过opencvpython深度学习算法框架模型&#xff0c;老年人跌倒智能识别算法能够及时发现老年人跌倒情况&#xff0c;提供快速的援助和救援措施&#xff0c;保障老年人的安全。Python是一种由Guido van Rossum开发的通用编程语言&#xff0c;它很快就变得…...

编程日记 2023/8/30 5:56:18

ros2官方文档（基于humble版本）学习笔记

ros2官方文档&#xff08;基于humble版本&#xff09;学习笔记&#xff08;一&#xff09; 一、安装ROS2二、按教程学习1.CLI 工具配置环境 由于市面上专门讲ROS2开发的书籍不多&#xff0c;近期看完了《ROS机器人开发实践》其中大部分内容还是基于ROS1写的&#xff0c;涉及top…...

编程日记 2023/8/30 5:55:17

可拖动表格

支持行拖动&#xff0c;列拖动 插件&#xff1a;sortablejs UI: elementUI <template><div><hr style"margin: 30px 0;"><div><!-- 数据里面要有主键id&#xff0c; 否则拖拽异常 --><h2 style"margin-bottom: 30px&qu…...

编程日记 2023/8/30 5:54:15

C++语法基础

这里写目录标题 基础语法第一个程序变量常量的定义关键字标识符命名 &#xff08;变量命名&#xff09;sizeof的使用实型&#xff08;浮点型&#xff09;字符型转义字符字符串的定义 一级目录二级目录二级目录二级目录 一级目录二级目录二级目录二级目录 基础语法 第一个程序 …...

编程日记 2023/8/30 5:53:14

Windi CSS和Tailwind CSS以及UnoCSS

最近合作在写一个vue3ts的项目&#xff0c;看到其他人用了一种写法&#xff0c;我觉得很奇怪&#xff0c;之前没见过&#xff0c;他是这样写的 <div class"news flex-1 h-40px flex"></div>我不理解的是为什么这样写就会让这个div的高度就是40px,好多代码…...

编程日记 2023/8/30 5:52:13

c++ opencv将彩色图像按连通域区分

要将彩色图像按连通域区分&#xff0c;您可以使用 OpenCV 中的 cv::connectedComponents 函数。 下面是一个简单的示例代码&#xff0c;说明如何使用 cv::connectedComponents 函数来检测并标记图像中的连通域&#xff1a; #include <opencv2/opencv.hpp> #include <…...

编程日记 2023/8/30 5:51:12

mxbai-embed-large-v1 应用开发：从零构建智能文档检索系统

mxbai-embed-large-v1 应用开发&#xff1a;从零构建智能文档检索系统 1. 项目概述与核心价值 mxbai-embed-large-v1 是由 mixedbread-ai 开发的高性能文本嵌入模型&#xff0c;在 MTEB 基准测试中超越了 OpenAI text-embedding-3-large 等商业模型。该模型能够将文本转换为高…...

编程新知 2026/3/31 5:50:29

Psins实战：从零解析SINS/GPS松组合导航中的Kalman滤波器初始化与调参

1. 初识SINS/GPS松组合导航与Kalman滤波 刚接触导航算法的朋友可能会被"SINS/GPS松组合"这个术语吓到&#xff0c;其实拆开看很简单。SINS&#xff08;捷联惯性导航系统&#xff09;就像是个不知疲倦的计步器&#xff0c;通过IMU&#xff08;惯性测量单元&#xff09…...

编程新知 2026/3/31 5:42:25

WebLogic T3协议漏洞实战：5分钟搞定ConnectionFilterImpl配置（附常见问题排查）

WebLogic T3协议安全加固实战&#xff1a;ConnectionFilterImpl配置与深度防御指南 1. 漏洞背景与防御必要性 WebLogic作为企业级Java应用服务器&#xff0c;其专有的T3协议长期存在反序列化漏洞风险。攻击者通过构造恶意T3协议数据包&#xff0c;可在未授权情况下实现远程代码…...

编程新知 2026/3/31 4:54:02

gh_mirrors/eg/eggs深度解析：一站式解决所有服务器部署难题

gh_mirrors/eg/eggs深度解析&#xff1a;一站式解决所有服务器部署难题 【免费下载链接】eggs Service eggs for the pterodactyl panel 项目地址: https://gitcode.com/gh_mirrors/eg/eggs 在服务器管理领域&#xff0c;快速部署和高效运维一直是开发者和管理员面临的核…...

编程新知 2026/3/31 4:50:01

Iggy架构深度解析：从零构建的高性能消息流系统

Iggy架构深度解析&#xff1a;从零构建的高性能消息流系统 【免费下载链接】iggy Iggy is the persistent message streaming platform written in Rust, supporting QUIC, TCP and HTTP transport protocols, capable of processing millions of messages per second. 项目地…...

编程新知 2026/3/31 4:41:23

Hunyuan-MT-7B翻译终端实操手册：Pixel Language Portal的HUD状态监控与错误回溯机制详解

Hunyuan-MT-7B翻译终端实操手册&#xff1a;Pixel Language Portal的HUD状态监控与错误回溯机制详解 1. 像素语言传送门概览 Pixel Language Portal是一款基于腾讯Hunyuan-MT-7B大模型构建的创新翻译工具&#xff0c;将传统翻译体验重构为16-bit像素冒险风格。这款工具不仅提…...

编程新知 2026/3/31 4:33:15

Qt 实时数据可视化工程实践：环形缓冲区实践

目录 前言 一、架构设计 1.1 分层架构图 1.2 数据写入流 1.3 数据刷新流 (定时器驱动 → 视图更新) 1.4 核心设计思想 二、核心实现详解 2.1 RingBuffer&#xff1a;环形缓冲区实现 2.1.1 append函数&#xff08;线程安全写入&#xff09; 函数主体实现&#xff1a; …...

编程新知 2026/3/31 3:58:51

MoveIt2的KDL插件不好用？手把手教你自定义关节权重，优化机械臂运动优先级

MoveIt2关节权重调优实战&#xff1a;如何让冗余机械臂按你的想法运动 当机械臂的第七个关节开始不受控制地乱转&#xff0c;而前三个关节却几乎不动时&#xff0c;大多数工程师的第一反应是"这IK算法有问题"。但真相往往是&#xff1a;算法没问题&#xff0c;只是它…...

编程新知 2026/3/31 3:24:26

VIT模型IP核需要修改的地方

导入路径 "D:\VIT\HG-PIPE\instances\proj_ATTN0\work"选择“open project”整合多个 HLS IP 时 遇到“撞名”此时会报错&#xff1a;Top function not found: there is no function named top INFO: [HLS 200-1510] Running: set_directive_top -name top top...

编程新知 2026/3/31 2:09:23

Ubuntu 24.04 时间同步踩坑记：从 hwclock 到 timedatectl 的演进与实战

Ubuntu 24.04 时间同步踩坑记&#xff1a;从 hwclock 到 timedatectl 的演进与实战 记得第一次在 Ubuntu 24.04 上看到系统时间与 Windows 11 相差整整 8 小时时&#xff0c;我下意识地敲下了熟悉的 hwclock 命令——这个陪伴我多年的老伙计。然而终端冰冷的报错提示让我意识到…...

编程新知 2026/3/31 0:01:38