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

js实现websocket服务端和客户端

news 2026/5/13 1:06:02

天行健，君子以自强不息；地势坤，君子以厚德载物。

每个人都有惰性，但不断学习是好好生活的根本，共勉！

文章均为学习整理笔记，分享记录为主，如有错误请指正，共同学习进步。

文章目录

  • 一、nodejs环境
  • 二、js客户端
  • 三、js服务端
    • 1. 初始化
    • 2. 安装ws
    • 3. 创建文件server.js作为服务器
  • 四、测试
    • 1. 启动服务器
    • 2. 启动客户端
    • 3. 测试

一、nodejs环境

安装node.js
配置nodejs的环境
参考文章：nodejs下载安装配置

二、js客户端

创建文件client.html

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>websocket测试</title>		</head><body><button onclick="sendMessage()">发消息给服务器</button></body>
</html>
<!-- <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> -->
<script type="text/javascript"> // 打开一个 web socket，设定websocket服务器地址和端口const ws = new WebSocket("ws://127.0.0.1:8888/");//开启连接open后客户端处理方法ws.onopen = function(event){// Web Socket 已连接上，在页面中显示消息//   document.getElementById('res').innerHTML="当前客户端已经连接到websocket服务器";console.log('websocket已连接')};// 点击按钮时给websocket服务器端发送消息// $('#btn').click(function(){// 	var value = $('#demo').val();//     console.log(value)// 	ws.send(value);// })// 接收消息后客户端处理方法ws.onmessage = function (event) { //接收到服务端的消息后，输出打印收到消息的内容console.log('收到服务端回复的消息：'+event.data);//   $('#res').text(evt.data);};// 关闭websocketws.onclose = function(event){ // 关闭 websocketalert("连接已关闭..."); };//发送给服务端的消息内容function sendMessage(){ws.send("hello server, I am client")}</script>

三、js服务端

1. 初始化

输入命令执行初始化

npm init -y

在这里插入图片描述
执行后会出现一个josn文件
在这里插入图片描述

2. 安装ws

打开终端输入命令安装ws

npm install ws

在这里插入图片描述
然后会多出一个node_modules的文件夹，用来放引入的ws包
在这里插入图片描述

3. 创建文件server.js作为服务器

const http = require('http');
const websocket = require('ws');const server = http.createServer();
const wss = new websocket.Server({server});//绑定事件，建立连接
wss.on('connection',(socket)=>{console.log('websocket已连接');//收到客户端发来的消息socket.on('message',(message)=>{//打印收到的消息console.log('收到客户端发来的消息：'+message);//收到后返回消息给客户端socket.send('hello client, I am server, I received')});socket.on('close', ()=>{console.log('websocket连接已关闭');});
});server.on('request', (request, response)=>{response.writeHead(200, {'Content-Type':'text/plain'});response.end('Hello,world1111!');
});server.listen(8888, ()=>{console.log('服务已启动，端口号为8888');
});

四、测试

1. 启动服务器

终端启动sever.js作为服务器

node server.js

在这里插入图片描述

2. 启动客户端

打开client.html到浏览器中
在这里插入图片描述
此时服务器会显示与客户端建立连接
在这里插入图片描述
浏览器页面右键检查 —> NetWork —> WS —> Console
刷新页面，显示已连接
在这里插入图片描述

3. 测试

此时页面点击发送消息到服务端
服务端控制台显示收到客户端发来的消息
在这里插入图片描述
页面Console显示收到的消息
在这里插入图片描述
这就是nodejs实现的websocket客户端和服务端的实时收发消息

感谢阅读，祝君暴富！

相关文章：

js实现websocket服务端和客户端

天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物。 每个人都有惰性&#xff0c;但不断学习是好好生活的根本&#xff0c;共勉&#xff01; 文章均为学习整理笔记&#xff0c;分享记录为主&#xff0c;如有错误请指正&#xff0c;共同学习进步。…...

编程日记 2023/9/17 2:46:30

qt qml RadioButton如何设置字体颜色，style提示找不到怎么办？

qt QML中设置RadioButton的字体颜色&#xff0c;可以使用RadioButton的label属性来设置文本的样式。下面是一个示例代码&#xff1a; import QtQuick 2.6 import QtQuick.Controls 2.2 import QtQuick.Controls 1.4 as Controls1_4 import QtQuick.Controls.Styles 1.4 import…...

编程日记 2023/9/17 2:45:29

Docker 的使用

一、Docker 的作用和优势 软件集装箱化平台&#xff0c;可让开发者构建应用程序时&#xff0c;将它与环境一起打包到一个容器中&#xff0c;发布应用到任意平台中。 能在单台机器上运行多个Docker微容器&#xff0c;而每个微容器里都有一个微服务或独立应用&#xff0c; 如&am…...

编程日记 2023/9/17 2:44:28

【无公网IP内网穿透】Java支付宝沙箱环境支付，SDK接口远程调试

目录 1.测试环境 2.本地配置 3. 内网穿透 3.1 下载安装cpolar内网穿透 3.2 创建隧道 4. 测试公网访问 5. 配置固定二级子域名 5.1 保留一个二级子域名 5.2 配置二级子域名 6. 使用固定二级子域名进行访问 1.测试环境 MavenSpring bootJdk 1.8 2.本地配置 获取支付…...

编程日记 2023/9/17 2:42:26

axios 用formData的方式请求数据

需求&#xff1a;使用axios库用来做http数据传输。 问题&#xff1a;传递数据的时候不是直接通过json的方式来传输的数据&#xff0c;二是通过formData的方式 解决&#xff1a; axios 请求头设置&#xff0c;Content-Type "Content-Type": "application/x-w…...

编程日记 2023/9/17 2:39:23

Mapbox加载arcgis的底图

成果图 这种底图基本上都是按照raster来加载的&#xff0c;主要就是知道地址了&#xff0c;拼参数 具体参数请参考官网 https://developers.arcgis.com/rest/services-reference/enterprise/export-map.htm 源码 我的服务列表是这样的 http://XXXX:XXXX/arcgis/rest/services/…...

编程日记 2023/9/17 2:37:20

(20)线程安全问题:Lock,双锁问题,Monitor,死锁

一、Lock 1、用多线程给变量自增&#xff0c;10000个线程自增 List<Task> tasks new List<Task>();int AsyncNum 0;for (int i 0; i < 10000; i){tasks.Add(Task.Run(() >{AsyncNum;}));}Task.WaitAll(tasks.ToArray());Console.WriteLine($"AsyncNu…...

编程日记 2023/9/17 2:36:19

医院如何实现安全又稳定的跨网文件数据交换呢？

随着医疗信息化的发展&#xff0c;医院之间需要频繁地进行文件数据交换&#xff0c;以实现诊疗、科研、管理等方面的协同和共享。然而&#xff0c;由于医院网络环境的复杂性和敏感性&#xff0c;跨网文件数据交换面临着安全性和稳定性的双重挑战。如何在保证文件数据不被泄露、…...

编程日记 2023/9/17 2:35:18

关于老项目从JDK8升级到JDK17所需要注意的细节

文章目录 ☀️1.关于老项目从JDK8升级到JDK17所需要注意的细节&#x1f338;1.1.更新JDK&#x1f338;1.2.修改Idea中的JDK版本&#x1f338;1.3.关于修改过程中遇到的异常&#x1f338;1.4.IDEA工具栏操作Maven正常&#xff0c;但使用mvn命令运行就报错 ☀️1.关于老项目从JDK…...

编程日记 2023/9/17 2:34:16

《C++ primer》练习3.43-3.45: 打印二维数组的元素

文章目录 1. 使用范围for循环2. 使用普通for循环2.1 使用指针2.2 使用数组下标 类型别名的简化 本文来自于《C primer》的练习3.43-3.45&#xff0c;觉得多维数组的遍历有不同的实现方式&#xff0c;于是记录一下。写的可能没有按题目的顺序来。题目大概含义是定义了一个二维数…...

编程日记 2023/9/17 2:32:14

使用电力系统稳定器 （PSS） 和静态 VAR 补偿器 （SVC） 提高瞬态稳定性（Matlab代码实现）

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…...

编程日记 2023/9/17 2:31:13

开源项目-SeaTunnel-UI数据集成系统

哈喽，大家好，今天给大家带来一个开源项目-SeaTunnel-UI数据集成系统 系统主要有任务配置，任务实例，数据源，虚拟表，用户管理等功能 登录 数据源 mysql数据源配置参数说明 kafka参数配置 mysqlcdc配置参数说明 虚拟表...

编程日记 2023/9/17 2:30:12

百度SEO优化策略与经验分享（提升百度排名的8大步骤）

百度关键词优化策略介绍&#xff1a;蘑菇号https://www.mooogu.cn/ 百度搜索引擎优化&#xff0c;简称为百度SEO&#xff0c;是一种通过优化网站结构和内容&#xff0c;提高网站在百度搜索引擎中的排名&#xff0c;从而获得更多有价值的流量和销售机会的行业术语。百度SEO的核…...

编程日记 2023/9/17 2:29:11

【深度学习】- NLP系列文章之 1.文本表示以及mlp来处理分类问题

系列文章目录 1. 文本分类与词嵌入表示&#xff0c;mlp来处理分类问题 2. RNN、LSTM、GRU三种方式处理文本分类问题 3. 评论情绪分类 还是得开个坑&#xff0c;最近搞论文&#xff0c;使用lstm做的ssd的cache prefetching&#xff0c;意味着我不能再划水了。 文章目录 系列文章…...

编程日记 2023/9/17 2:24:06

力扣236 补9.14

做不来&#xff0c;我做中等题基本上都是没有思路&#xff0c;这里需要先遍历祖先节点&#xff0c;那必然用先序遍历&#xff0c;这题还是官方题解容易理解&#xff0c;第二火的题解反而把我弄得脑袋昏昏的。 class Solution { TreeNode ans; public TreeNode lowestCommonAnce…...

编程日记 2023/9/17 2:22:04

一文搞定Postman（菜鸟必看）

什么是Postman&#xff1f; Postman是一个可扩展的 API 测试工具&#xff0c;可以快速集成到 CI/CD 管道中。它于 2012 年作为 Abhinav Asthana 的一个副项目启动&#xff0c;旨在简化测试和开发中的 API 工作流程。API 代表应用程序编程接口&#xff0c;它允许软件应用程序通…...

编程日记 2023/9/17 2:21:03

位图+布隆过滤器+海量数据并查集(它们都是哈希的应用)

一)位图: 首先计算一下存储一下10亿个整形数据&#xff0c;需要多大内存呢&#xff0c;多少个G呢&#xff1f; 2^3010亿&#xff0c;10亿个字节 byte kb mb gb 100000000个字节/1024/1024/10241G 所以10亿个字节就是1G&#xff0c;所以40亿个字节就是4G&#xff0c;也就是10个整…...

编程日记 2023/9/17 2:20:02

MYSQL：Select语句顺序

SELECT子句及其顺序整理表格&#xff1a; 子句 说明是否必须使用SELECT 要返回的列或表达式是FROM 从中检索数据的表仅在从表选择数据使用WHERE 行级过滤否GROUP BY 分组说明仅在按组计算聚…...

编程日记 2023/9/17 2:17:59

Pytest系列-数据驱动@pytest.mark.parametrize（7）

简介 unittest 和 pytest参数化对比&#xff1a; pytest与unittest的一个重要区别就是参数化&#xff0c;unittest框架使用的第三方库ddt来参数化的 而pytest框架&#xff1a; 前置/后置处理函数fixture&#xff0c;它有个参数params专门与request结合使用来传递参数&#x…...

编程日记 2023/9/17 2:16:58

【Qt】QGroundControl入门2：下载、编译、错误处理、运行

1、源码下载 git clone https://github.com/mavlink/qgroundcontrol.git 2、下载依赖库 2.1 查看依赖库的github路径 cat .gitmodules[submodule "src/GPS/Drivers"]path = src/GPS/Driversurl = https://github.com/PX4/GpsDrivers.git [submodule "libs/m…...

编程日记 2023/9/17 2:15:58

LeetCode 岛屿数量题解

LeetCode 岛屿数量题解 题目描述 给定一个二维网格地图 1&#xff08;陆地&#xff09;和 0&#xff08;水&#xff09;&#xff0c;计算岛屿的数量。 示例&#xff1a; 输入&#xff1a;grid [ ["1","1","1","1","0"], …...

编程新知 2026/5/12 23:31:46

2026年Hermes Agent/OpenClaw怎么部署？阿里云自动化部署及Token Plan配置

2026年Hermes Agent/OpenClaw怎么部署&#xff1f;阿里云自动化部署及Token Plan配置。OpenClaw是开源的个人AI助手&#xff0c;Hermes Agent则是一个能自我进化的AI智能体框架。阿里云提供计算巢、轻量服务器及无影云电脑三种部署OpenClaw 与 Hermes Agent的方案、百炼Token P…...

编程新知 2026/5/12 23:03:45

期末课程论文不用卷！虎贲等考 AI：真文献 + 规范稿，轻松高效拿高分

一到期末、结课、学分冲刺阶段&#xff0c;课程论文就成了大学生最集中的压力点。选题不会定、框架搭不起来、文献找不到、内容写得太空、格式一塌糊涂、查重还容易超标…… 随便一项都能让原本简单的作业变得耗时又费力。 很多同学用通用 AI 凑字数&#xff0c;结果文献假、逻…...

编程新知 2026/5/12 22:41:39

可编程逻辑器件（PLD/CPLD/FPGA）核心原理、选型指南与EDA设计实战

1. 项目概述&#xff1a;从怀旧到硬核&#xff0c;聊聊可编程逻辑的“前世今生”那天在网上闲逛&#xff0c;本想找点微马赛克艺术&#xff08;Micromosaic&#xff09;的制作视频&#xff0c;结果算法一个拐弯&#xff0c;把我带回了上世纪七八十年代的《大青蛙布偶秀》&#…...

编程新知 2026/5/12 22:29:25

高海拔环境下的硬件设计挑战与GPS定位故障分析

1. 从数据记录到真实体验&#xff1a;高海拔环境下的技术挑战作为一名电子工程师&#xff0c;我习惯了在实验室里与精密的仪器和数据打交道&#xff0c;一切都在可控范围内。但当你带着自己设计的设备&#xff0c;踏上非洲之巅乞力马扎罗的征途时&#xff0c;现实会给你上一堂生…...

编程新知 2026/5/12 22:27:22

乔布斯产品哲学对硬件工程师的启示：从参数到体验的转变

1. 项目概述&#xff1a;一次对乔布斯遗产的技术性致敬2011年10月6日&#xff0c;当史蒂夫乔布斯逝世的消息传来&#xff0c;整个科技界陷入了一种复杂的情绪。作为一名长期在电子工程与消费电子领域工作的人&#xff0c;我的感受尤为深刻。那天&#xff0c;我和我的同事们&…...

编程新知 2026/5/12 22:23:01

别再乱装驱动了！Ubuntu 20.04显卡驱动‘掉了’的终极排查与修复思路

Ubuntu 20.04显卡驱动失效的系统化诊断与修复指南 当你正专注于一个重要项目时&#xff0c;突然发现Ubuntu的NVIDIA显卡驱动"神秘消失"——这种体验对Linux用户来说简直像一场噩梦。nvidia-smi命令返回"驱动未加载"&#xff0c;外接显示器黑屏&#xff0c;…...

编程新知 2026/5/12 21:38:36

Sora 2如何“唤醒”3D Gaussian Splatting？：从神经辐射场到毫秒级动态场景生成的4层技术跃迁解析

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;Sora 2与3D Gaussian Splatting融合的范式革命 传统视频生成模型受限于体素网格或NeRF隐式表示的计算开销与几何保真度瓶颈&#xff0c;而Sora 2通过引入时空一致性token压缩机制&#xff0c;与3D Gaus…...

编程新知 2026/5/12 21:24:30

计算机视觉入门：从OpenCV到PyTorch的实践指南

1. 项目概述&#xff1a;从“萌芽”到“入行”的视觉之旅 “对计算机视觉的萌芽迷恋”——这个标题精准地捕捉了无数技术爱好者&#xff0c;包括我自己&#xff0c;最初踏入这个领域时的心路历程。它描述的是一种状态&#xff1a;你或许被一张AI生成的艺术图片所震撼&#xff…...

编程新知 2026/5/12 19:39:06

Python+OpenCV+PyQt5+SVM实现车牌识别系统（源码）

目录 一、项目背景 二、技术介绍 三、功能介绍 四、 代码设计 五、系统实现 一、项目背景 随着我国城市化进程的不断加快&#xff0c;机动车保有量呈现持续快速增长态势。据公安部统计&#xff0c;2024年全国机动车保有量已突破4.5亿辆&#xff0c;其中汽车占比超过80%。…...

编程新知 2026/5/12 19:28:44