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

js实现websocket服务端和客户端

news 2026/2/10 17:10:39

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

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

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

文章目录

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

ES6从入门到精通：前言

ES6简介 ES6&#xff08;ECMAScript 2015&#xff09;是JavaScript语言的重大更新&#xff0c;引入了许多新特性&#xff0c;包括语法糖、新数据类型、模块化支持等&#xff0c;显著提升了开发效率和代码可维护性。 核心知识点概览 变量声明 let 和 const 取代 var&#xf…...

编程新知 2025/8/18 16:42:44

以下是对华为 HarmonyOS NETX 5属性动画（ArkTS）文档的结构化整理，通过层级标题、表格和代码块提升可读性：

一、属性动画概述NETX 作用&#xff1a;实现组件通用属性的渐变过渡效果&#xff0c;提升用户体验。支持属性&#xff1a;width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项&#xff1a; 布局类属性&#xff08;如宽高&#xff09;变化时&#…...

编程新知 2026/1/28 21:15:38

《通信之道——从微积分到 5G》读书总结

第1章 绪 论 1.1 这是一本什么样的书 通信技术&#xff0c;说到底就是数学。 那些最基础、最本质的部分。 1.2 什么是通信 通信 发送方 接收方 承载信息的信号 解调出其中承载的信息 信息在发送方那里被加工成信号&#xff08;调制&#xff09; 把信息从信号中抽取出来&am…...

编程新知 2026/2/7 11:01:56

NLP学习路线图（二十三）：长短期记忆网络（LSTM）

在自然语言处理（NLP）领域，我们时刻面临着处理序列数据的核心挑战。无论是理解句子的结构、分析文本的情感，还是实现语言的翻译，都需要模型能够捕捉词语之间依时序产生的复杂依赖关系。传统的神经网络结构在处理这种序列依赖时显得力不从心，而循环神经网络（RNN） 曾被视为…...

编程新知 2026/2/1 7:05:28

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决 问题背景 在一个基于 Spring Cloud Gateway WebFlux 构建的微服务项目中&#xff0c;新增了一个本地验证码接口 /code&#xff0c;使用函数式路由&#xff08;RouterFunction&#xff09;和 Hutool 的 Circle…...

编程新知 2026/2/9 4:25:05

网站指纹识别

网站指纹识别 网站的最基本组成&#xff1a;服务器&#xff08;操作系统&#xff09;、中间件&#xff08;web容器&#xff09;、脚本语言、数据厍 为什么要了解这些&#xff1f;举个例子&#xff1a;发现了一个文件读取漏洞&#xff0c;我们需要读/etc/passwd&#xff0c;如…...

编程新知 2026/2/2 17:06:29

Python+ZeroMQ实战：智能车辆状态监控与模拟模式自动切换

目录 关键点 技术实现1 技术实现2 摘要&#xff1a; 本文将介绍如何利用Python和ZeroMQ消息队列构建一个智能车辆状态监控系统。系统能够根据时间策略自动切换驾驶模式&#xff08;自动驾驶、人工驾驶、远程驾驶、主动安全&#xff09;&#xff0c;并通过实时消息推送更新车…...

编程新知 2025/11/12 0:06:50

Linux中《基础IO》详细介绍

目录 理解"文件"狭义理解广义理解文件操作的归类认知系统角度文件类别 回顾C文件接口打开文件写文件读文件稍作修改&#xff0c;实现简单cat命令 输出信息到显示器&#xff0c;你有哪些方法stdin & stdout & stderr打开文件的方式 系统⽂件I/O⼀种传递标志位…...

编程新知 2026/2/3 4:42:54

LangChain【6】之输出解析器：结构化LLM响应的关键工具

文章目录 一 LangChain输出解析器概述1.1 什么是输出解析器&#xff1f;1.2 主要功能与工作原理1.3 常用解析器类型 二 主要输出解析器类型2.1 Pydantic/Json输出解析器2.2 结构化输出解析器2.3 列表解析器2.4 日期解析器2.5 Json输出解析器2.6 xml输出解析器 三 高级使用技巧3…...

编程新知 2025/10/4 5:55:58

英国云服务器上安装宝塔面板（BT Panel）

在英国云服务器上安装宝塔面板&#xff08;BT Panel&#xff09; 是完全可行的&#xff0c;尤其适合需要远程管理Linux服务器、快速部署网站、数据库、FTP、SSL证书等服务的用户。宝塔面板以其可视化操作界面和强大的功能广受国内用户欢迎&#xff0c;虽然官方主要面向中国大陆…...

编程新知 2026/2/5 6:12:55