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

js实现websocket服务端和客户端

news 2025/7/4 21:52:16

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

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

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

文章目录

  • 一、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

中南大学无人机智能体的全面评估！BEDI：用于评估无人机上具身智能体的综合性基准测试

作者&#xff1a;Mingning Guo, Mengwei Wu, Jiarun He, Shaoxian Li, Haifeng Li, Chao Tao单位&#xff1a;中南大学地球科学与信息物理学院论文标题&#xff1a;BEDI: A Comprehensive Benchmark for Evaluating Embodied Agents on UAVs论文链接&#xff1a;https://arxiv.…...

编程新知 2025/7/3 17:19:05

Auto-Coder使用GPT-4o完成：在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务

通过akshare库&#xff0c;获取股票数据&#xff0c;并生成TabPFN这个模型 可以识别、处理的格式&#xff0c;写一个完整的预处理示例&#xff0c;并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务&#xff0c;进行预测并输…...

编程新知 2025/6/26 20:21:28

页面渲染流程与性能优化

页面渲染流程与性能优化详解&#xff08;完整版&#xff09; 一、现代浏览器渲染流程&#xff08;详细说明&#xff09; 1. 构建DOM树 浏览器接收到HTML文档后&#xff0c;会逐步解析并构建DOM&#xff08;Document Object Model&#xff09;树。具体过程如下&#xff1a; (…...

编程新知 2025/6/26 7:14:46

汇编常见指令

汇编常见指令 一、数据传送指令 指令功能示例说明MOV数据传送MOV EAX, 10将立即数 10 送入 EAXMOV [EBX], EAX将 EAX 值存入 EBX 指向的内存LEA加载有效地址LEA EAX, [EBX4]将 EBX4 的地址存入 EAX&#xff08;不访问内存&#xff09;XCHG交换数据XCHG EAX, EBX交换 EAX 和 EB…...

编程新知 2025/7/4 10:27:56

云原生玩法三问：构建自定义开发环境

云原生玩法三问&#xff1a;构建自定义开发环境 引言 临时运维一个古董项目&#xff0c;无文档&#xff0c;无环境&#xff0c;无交接人&#xff0c;俗称三无。 运行设备的环境老&#xff0c;本地环境版本高&#xff0c;ssh不过去。正好最近对 腾讯出品的云原生 cnb 感兴趣&…...

编程新知 2025/6/21 14:21:20

Netty从入门到进阶（二）

二、Netty入门 1. 概述 1.1 Netty是什么 Netty is an asynchronous event-driven network application framework for rapid development of maintainable high performance protocol servers & clients. Netty是一个异步的、基于事件驱动的网络应用框架&#xff0c;用于…...

编程新知 2025/7/4 2:35:25

站群服务器的应用场景都有哪些？

站群服务器主要是为了多个网站的托管和管理所设计的&#xff0c;可以通过集中管理和高效资源的分配&#xff0c;来支持多个独立的网站同时运行&#xff0c;让每一个网站都可以分配到独立的IP地址&#xff0c;避免出现IP关联的风险&#xff0c;用户还可以通过控制面板进行管理功…...

编程新知 2025/6/17 5:04:55

Git常用命令完全指南：从入门到精通

Git常用命令完全指南&#xff1a;从入门到精通 一、基础配置命令 1. 用户信息配置 # 设置全局用户名 git config --global user.name "你的名字"# 设置全局邮箱 git config --global user.email "你的邮箱example.com"# 查看所有配置 git config --list…...

编程新知 2025/7/4 1:35:42

Elastic 获得 AWS 教育 ISV 合作伙伴资质，进一步增强教育解决方案产品组合

作者&#xff1a;来自 Elastic Udayasimha Theepireddy (Uday), Brian Bergholm, Marianna Jonsdottir 通过搜索 AI 和云创新推动教育领域的数字化转型。 我们非常高兴地宣布&#xff0c;Elastic 已获得 AWS 教育 ISV 合作伙伴资质。这一重要认证表明&#xff0c;Elastic 作为 …...

编程新知 2025/6/27 18:40:12

CppCon 2015 学习:Time Programming Fundamentals

Civil Time 公历时间 特点&#xff1a; 共 6 个字段&#xff1a; Year&#xff08;年&#xff09;Month&#xff08;月&#xff09;Day&#xff08;日&#xff09;Hour&#xff08;小时&#xff09;Minute&#xff08;分钟&#xff09;Second&#xff08;秒&#xff09; 表示…...

编程新知 2025/6/16 11:03:37