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

js实现websocket服务端和客户端

news 文章来源：https://blog.csdn.net/mo_sss/article/details/132793308 2024/11/18 15:50:12

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

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

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

文章目录

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

【深度学习】Pytorch 系列教程（十）：PyTorch数据结构：2、张量操作（Tensor Operations）：（4）索引和切片详解

目录 一、前言 二、实验环境 三、PyTorch数据结构 0、分类 1、张量&#xff08;Tensor&#xff09; 2、张量操作&#xff08;Tensor Operations&#xff09; 1. 数学运算 2. 统计计算 3. 张量变形 4. 索引和切片 使用索引访问单个元素 使用切片访问子集 使用索引和…...

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

2024字节跳动校招面试真题汇总及其解答（三）

6.jwt与cookie区别 JWT 和 Cookie 都是用于在客户端和服务器之间传输信息的常用方法。但是，它们之间存在一些关键差异。 JWT 是 JSON Web Token 的缩写，它是一种基于 JSON 的加密令牌。JWT 由三部分组成：Header、Payload 和 Signature。Header 包含令牌的类型、加密算法和…...

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

基于springboot+vue的便利店信息管理系统

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战 主要内容&#xff1a;毕业设计(Javaweb项目|小程序等)、简历模板、学习资料、面试题库、技术咨询 文末联系获取 项目介绍…...

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

在ubuntu18.04上编译C++版本jsoncpp/opencv/onnxruntime且如何配置CMakelist把他们用起来~

这篇文章背景是笔者在ubuntu上编译C代码&#xff0c;依赖一些包&#xff0c;然后需要编译并配置到CMakelist做的笔记。主要也是一直不太懂CMakellist&#xff0c;做个笔记以防忘记&#xff0c;也给读者提供一站式的参考&#xff0c;可能您需要的不是这几个包&#xff0c;但大同…...

编程日记 2023/9/17 2:10:52

大二上学期学习计划

这个学期主要学习的技术有SpringBoot&#xff0c;Vue&#xff0c;MybatisPlus&#xff0c;redis&#xff0c;还有要坚持刷题&#xff0c;算法不能落下&#xff0c;要坚持一天至少刷2道题目&#xff0c;如果没有布置任务就刷洛谷上面的&#xff0c;有任务的话就尽量完成任务&…...

编程日记 2023/9/17 2:08:51

【python爬虫—星巴克产品】

文章目录 需求爬取星巴克产品以及图片&#xff0c;星巴克菜单 python爬虫爬取结果 需求 爬取星巴克产品以及图片&#xff0c;星巴克菜单 网页分析&#xff1a; 首先&#xff0c;需要分析星巴克官方网站的结构&#xff0c;了解菜单栏的位置、布局以及菜单项的标签或类名等信息…...

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

shell SQL 变量 Oracle shell调用SQL操作DB

注意 &#xff1a; v\\\$ 用法, “v\\\$session ” ""不能用 sqlplus -S / as sysdba << EOF set pagesize 0 set verify off set feedback off set echo off col coun new_value v_coun select count(*) coun from dual; EOF value"$?"VALUE…...

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

【校招VIP】java线程池考点之核心线程数

考点介绍&#xff1a; 线程池是这一两年java大厂提问频度飙升的考点&#xff0c;需要从池子的概念理解相关参数和方法 java线程池考点之核心线程数-相关题目及解析内容可点击文章末尾链接查看&#xff01; 一、考点试题 1、请列举一下启动线程有哪几种方式&#xff0c;之后再…...

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

[每周一更]-(第61期)：Rust入门策略(持续更新)

一门语言的学习&#xff0c;就要从最基本的语法开始认识&#xff0c;再分析不同语言的区别&#xff0c;再加上实战&#xff0c;才能更快的学会&#xff0c;领悟到作者的设计思想&#xff1b; 介绍 Rust编程练习 开发工具VSCode及插件 社区驱动的 rust-analyzerEven Better T…...

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

线程安全问题的原因及解决方案

要想知道线程安全问题的原因及解决方案&#xff0c;首先得知道什么是线程安全&#xff0c;想给出一个线程安全的确切定义是复杂的&#xff0c;但我们可以这样认为&#xff1a;如果多线程环境下代码运行的结果是符合我们预期的&#xff0c;即在单线程环境应该的结果&#xff0c;…...

编程日记 2023/9/17 1:59:43

深圳沙头网站建设/个人免费建站系统

基于HSV颜色模型的直方图均衡化图像去雾技术_百度学术 http://xueshu.baidu.com/s?wdpaperuri%3A(8622e930fa7d1a1a46986dd38a978659)&filtersc_long_sign&tnSE_baiduxueshu_c1gjeupa&ieutf-8&sc_ks_paraq%3D%E5%9F%BA%E4%BA%8EHSV%E9%A2%9C%E8%89%B2%E6%A8%A…...

编程日记 2024/11/18 15:07:38

涉密项目单位网站建设流程/手机网页制作软件

一、设置动态获取IP dhclient命令使用动态主机配置协议动态的配置网络接口的网络参数。 语法 dhclient(选项)(参数) 选项 0&#xff1a; 指定dhcp客户端监听的端口号&#xff1b; -d&#xff1a;总是以前台方式运行程序&#xff1b;-q&#xff1a;安静模式&#xff0c;不打印…...

编程日记 2024/11/18 14:57:26

php网站开发目录/如何优化推广中的关键词

TVS管和ESD管工作原理一样&#xff0c;功率和封装不一样&#xff1b; ESD体积比较小&#xff0c;主要是用来防静电&#xff0c;防静电就要求电容值低&#xff1b; TVS的电容值比较高&#xff0c;体积比较大&#xff0c;浪涌保护。 深圳市阿赛姆科技有限公司 专业做ESD防护 深…...

编程日记 2024/11/18 13:37:29

增加网站访问量/成都谷歌seo

在第一次安装的时候出现这个错误信息 解决办法&#xff1a; 修改config.inc.php文件里的两个属性值为: $tlCfg->log_path TL_ABS_PATH . logs . DIRECTORY_SEPARATOR ;$g_repositoryPath TL_ABS_PATH . "upload_area" . DIRECTORY_SEPARATOR; 配置中文 在config…...

编程日记 2024/11/18 8:04:24

建设一个网站的基本步骤/企业内训机构

软件名称识别[abrt-addon-ccpp]-[2.1.11-19].[el7].[x86_64].rpm|| || || ||软件名称 软件版本 适用版本 软件适用系统 64位2.如何安装软件1.rpmrpm -ivh name.rpm 安装 ,-v显示过程&#xff0c…...

编程日记 2024/11/18 1:30:42

苏州沧浪区做网站的/友情链接出售平台

warning: incompatible implicit declaration of built-in function ‘strlen’ [enabled by default] 警告:不兼容的隐式声明的内置函数的strlen(默认启用) 出现此错误的原因&#xff1a;函数声明的头文件没有包含进来&#xff0c;故将strlen的头文件string.h包含进来&#…...

编程日记 2024/11/17 18:57:39