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="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

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

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

相关文章

Tomcat快速入门

概念&#xff1a;Tomcat是Apache软件基金会一个核心项目&#xff0c;是一个开源免费的轻量级Web服务器&#xff0c;支持Servlet/JSP少量JavaEE规范 Tomcat也被称为Web容器、Servlet容器。Servlet程序需要依赖于Tomcat才能运行 官网&#xff1a;Apache Tomcat - Welcome! 基本…

12、监测数据采集物联网应用开发步骤(9.1)

监测数据采集物联网应用开发步骤(8.2) TCP/IP Server开发 在com.zxy.common.Com_Para.py中添加如下内容 #锁机制 lock threading.Lock() #本机服务端端口已被连接客户端socket list dServThreadList {} #作为服务端接收数据拦截器 ServerREFLECT_IN_CLASS "com.plug…

设计模式-装饰模式

文章目录 一、简介二、基本概念三、装饰模式的结构和实现类图解析&#xff1a;装饰器的实现方式继承实现&#xff1a;组合实现&#xff1a;继承和组合对比 四、装饰模式的应用场景五、与其他模式的关系六、总结 一、简介 装饰模式是一种结构型设计模式&#xff0c;它允许动态地…

msvcp120.dll丢失的解决方法?全面解决方法推荐

msvcp120.dll是Windows操作系统中的一个关键组件&#xff0c;如果丢失或损坏&#xff0c;可能会导致系统崩溃或无法正常运行。本文将介绍三种解决msvcp120.dll丢失问题的方法。 随着计算机应用的广泛普及&#xff0c;越来越多的人开始遇到各种电脑问题。其中&#xff0c;msvcp…

FPGA原理与结构——FIFO IP核的使用与测试

一、前言 本文介绍FIFO Generator v13.2 IP核的具体使用与例化&#xff0c;在学习一个IP核的使用之前&#xff0c;首先需要对于IP核的具体参数和原理有一个基本的了解&#xff0c;具体可以参考&#xff1a; FPGA原理与结构——FIFO IP核原理学习https://blog.csdn.net/apple_5…

算法通关村第十二关——字符串反转问题解析

前言 字符串反转是关于字符串算法里的重要问题&#xff0c;虽然不是太难&#xff0c;但需要考虑到一些边界问题。本篇文章就对几道字符串反转题目进行分析。 1.反转字符串 力扣344题&#xff0c;编写一个函数&#xff0c;其作用是将输入的字符串反转过来。输入字符串以字符数…

亚马逊云科技生成式AI技术辅助教学领域,近实时智能应答2D数字人搭建

早在大语言模型如GPT-3.5等的兴起和被日渐广泛的采用之前&#xff0c;教育行业已经在AI辅助教学领域有过各种各样的尝试。在教育行业&#xff0c;人工智能技术的采用帮助教育行业更好地实现教学目标&#xff0c;提高教学质量、学习效率、学习体验、学习成果。例如&#xff0c;人…

应用案例 | 基于三维机器视觉的机器人麻袋拆垛应用解决方案

​Part.1 项目背景 在现代物流和制造行业中&#xff0c;麻袋的拆垛操作是一个重要且频繁的任务。传统的麻袋拆垛工作通常由人工完成&#xff0c;分拣效率较低&#xff0c;人力成本较高&#xff0c;现场麻袋堆叠、变形严重&#xff0c;垛型不规则、不固定&#xff0c;严重影响分…

(2023|PAMI,diffusion 综述)视觉扩散模型

Diffusion models in vision: A survey 公众号&#xff1a;EDPJ&#xff08;添加 VX&#xff1a;CV_EDPJ 进交流群&#xff09; 目录 0. 摘要 1. 简介 2. 通用框架 2.1 去噪扩散概率模型&#xff08;DDPMs&#xff09; 2.2 噪声条件评分网络&#xff08;NCSNs&#xff0…

[FMMPEG] parse与 demuxer

FFmpeg源码分析&#xff1a;av_parser_parse2()解析数据包 ffmpeg 4.3添加自定义demuxer ffmpeg API基础

b站手机缓存文件转MP4

b站缓存的文件 音频、视频、弹幕是分开的 这里我只用到了音频和视频所以只介绍这一部分 b站的缓存视频文件和路径结构如下 默认缓存路径 内部存储\Android\data\tv.danmaku.bilil\download\89720189 文件夹结构 文件夹 c_738583 这是单个视频的缓存文件夹 进入c_738583文件夹…

10. selenium API (二)

目录 1. 多层框架/窗口定位 2. 下拉框处理 2.1 前端界面 2.2 代码 3. 针对 alert 弹窗进行操作 3.1 前端界面 3.2 代码 4. 文件提交 4.1 前端界面 4.2 代码 5. 显示等待 6. 操作浏览器滚动条 7. 截图 8. 浏览器关闭 9. 窗口切换 在上篇文章中&#xff0c;我们学…

day27 String类 正则表达式

String类的getBytes方法 String s "腻害"; byte[] bytes s.getBytes(StandardCharsets.UTF_8); String类的new String方法 String ss "ss我的"; byte[] gbks ss.getBytes("gbk"); String gbk new String(gbks, "gbk"); String类的…

交换机端口安全实验

文章目录 一、实验的背景与目的二、实验拓扑三、实验需求四、实验解法1. PC配置IP地址部分2. 在SW1上开启802.1X身份验证3. 创建一个用户身份验证的用户。用户名为wangdaye&#xff0c;密码为1234564.创建一个端口隔离组&#xff0c;实现三台PC无法互相访问 摘要&#xff1a; 本…

Kubernetes技术--使用kubeadm快速部署一个K8s集群

这里我们配置一个单master集群。(一个Master节点,多个Node节点) 1.硬件环境准备 一台或多台机器,操作系统 CentOS7.x-86_x64。这里我们使用安装了CentOS7的三台虚拟机 硬件配置:2GB或更多RAM,2个CPU或更多CPU,硬盘30GB或更多 2.主机名称和IP地址规划 3. 初始化准备工作…

【C++技能树】继承概念与解析

Halo&#xff0c;这里是Ppeua。平时主要更新C&#xff0c;数据结构算法&#xff0c;Linux与ROS…感兴趣就关注我bua&#xff01; 继承 0. 继承概念0.1 继承访问限定符 1. 基类和派生类对象赋值兼容转换2. 继承中的作用域3. 派生类中的默认成员函数4.友元5.继承中的静态成员6.菱…

创建性-构造者设计模式

前言 我们在使用Retrofit等这些第三方框架的时候&#xff0c;发现他们的使用都很方便&#xff0c;比如Retrofit retrofit new Retrofit.Builder().build()&#xff0c;和我们通常直接new一个对象不同&#xff0c;他是交给Builder类&#xff0c;通过build()函数来构造一个Retro…

分布式爬虫与SOCKS5代理池的组合优势

在数据驱动的时代&#xff0c;网络爬虫成为了获取大量信息的重要工具。然而&#xff0c;随着网站反爬策略的升级&#xff0c;传统的单机爬虫面临着速度慢、易被封禁等问题。为了应对这些挑战&#xff0c;我们可以尝试将分布式爬虫与SOCKS5代理池相结合&#xff0c;提高爬虫的性…

2023-9-2 染色法判定二分图

题目链接&#xff1a;染色法判定二分图 #include <iostream> #include <cstring> #include <algorithm>using namespace std;const int N 100010l, M 200010;int n, m; int h[N], e[M], ne[M], idx;int color[N];void add(int a, int b) {e[idx] b, ne[id…

队列的链表实现 题目(难度1/10)

C数据结构与算法 目录 队列介绍 队列这种容器&#xff0c;就像大家排队上公交车一样。 第一个来到的人排在最前面&#xff1b; 最后来的排在最后面&#xff1b; 第一个先上车&#xff08;离开队列&#xff09;&#xff1b; 队列的接口 队列是有如下接口的容器&#xff1…