nodejs实现websocket服务端和客户端

news2024/10/5 14:21:32

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


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


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

文章目录

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


一、nodejs环境

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

二、nodejs客户端

创建文件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);
	};
	
	// 关闭websocket
	ws.onclose = function(event)
	{ 
	  // 关闭 websocket
	  alert("连接已关闭..."); 
	};
    //发送给服务端的消息内容
    function sendMessage(){
        ws.send("hello server, I am client")
    }

</script>

三、nodejs服务端

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客户端和服务端的实时收发消息


感谢阅读,祝君暴富!

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

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

相关文章

MySQL长文本字段的选取

某个字段需要存储 长文本类型的数据,长度可变,范围不清. varchar最多能存储多大长度呢? 何种情况下用text更好? 以下内容就为探究这个问题: <1>.先将content字段设为varchar(255),则此字段只能最多存储255个字符数 package mainimport "fmt"func main() { va…

2023年会展行业研究报告

第一章 行业概况 1.1 定义 会展行业是一个多元化和复杂的领域&#xff0c;涵盖了许多不同的活动和功能。一般来说&#xff0c;会展业是指在一定的区域空间内&#xff0c;许多人聚集在一起形成的定期或者不定期&#xff0c;制度或者非制度&#xff0c;传递和交流信息的群众性的…

Visual Studio运行Python程序(超级详细)

Visual Studio Code&#xff0c;简称 VS Code&#xff0c;是由微软公司开发的 IDE 工具。与微软其他 IDE&#xff08;如 Visual Studio&#xff09;不同的是&#xff0c;Visual Studio Code 是跨平台的&#xff0c;可以安装在 Windows、Linux 和 macOS平台上运行。 不仅如此&am…

UMA 2 - 创建自己的UMA模型⭐一.配置Blender环境

文章目录 🟥 下载 simple_renaming_panel🟧 Blender安装插件🟨 启用插件并保持自动更新🟩 打开插件视图🟥 下载 simple_renaming_panel UMA需要指定的人物骨骼名称,因此我们用该Blender插件快捷重命名. 下载链接: https://github.com/Weisl/simple_renaming_panel �…

阅读类APP广告变现的商业化发展方向

免费阅读类 APP 对广告的依赖程度较高。因此&#xff0c;如何实现流量精细化运营以最大化流量价值&#xff0c;是流量主面临的关键课题和难点&#xff1b;与此同时&#xff0c;免费阅读 APP 的 PV 量极大&#xff0c;但 UV、DAU 量级相对较小&#xff0c;因此&#xff0c;如何开…

python 学习笔记(6)—— Flask 、MySql

目录 Flask 1、起步 2、渲染项目的首页 3、处理无参数的 GET 请求 4、处理有 query 参数的 GET 请求 6、处理 params 参数的 get 请求 6、处理 application/json 类型请求体的 POST 请求 7、根据参数渲染模板页面 8、上传文件 数据库操作&#xff08;mysql&#xff0…

Jenkins结合gitlab自动化持续集成

最近在公司有负责搭建自动化测试环境&#xff0c;自动化脚本写好后&#xff0c;毋庸置疑是需要将自动化脚本进行持续集成测试&#xff0c;能够根据企业的定制化需求&#xff0c;通过Jenkins触发执行构建任务&#xff0c;定时执行自动化脚本等&#xff0c;今天就给大家介绍一下J…

可视化大屏设计模板 | 主题皮肤(报表UI设计)

下载使用可视化大屏设计模板&#xff0c;减少重复性操作&#xff0c;提高报表制作效率的同时也确保了报表风格一致&#xff0c;凸显关键数据信息。 软件&#xff1a;奥威BI系统&#xff0c;又称奥威BI数据可视化工具 所属功能板块&#xff1a;主题皮肤上传下载&#xff08;数…

【实践篇】redis管道pipeline使用详解

文章目录 0. 前言什么场景下使用redis管道特性 1.原理1.1 redis管道特性的处理机制 使用redis管道优化示例3. springboot使用redis管道示例4. 参考资料5. 源码地址6. Redis从入门到精通系列文章 0. 前言 Redis管道&#xff08;Pipeline&#xff09;是一种批量执行Redis命令的机…

Revit SDK 介绍:TypeRegeneration 修改类型,更新文档 ValidateParameters 参数合法性验证

前言 这篇文章介绍两个例子&#xff0c;逻辑比较简单&#xff1a; TypeRegeneration 修改类型&#xff0c;更新文档ValidateParameters 参数合法性验证 内容 TypeRegeneration FamilyType 不是继承自 Element 的&#xff0c;而是独立于 Element 体系之外&#xff0c;直接从…

window.structuredClone()

先看下兼容性 1. 创建一个要克隆的对象。例如&#xff1a; const originalObj {name: John,age: 25,address: {city: New York,country: USA} };2. 调用structuredClone()方法克隆对象。例如&#xff1a; const clonedObj window.structuredClone(originalObj);3. clonedObj将…

软件安全研究(四)

文章目录 Fine-Grained Code Clone Detection with Block-Based Splitting of Abstract Syntax Tree文章结构IntroMotivationDefinitionSystemOverviewProcessingVerify Experimentexperimental settingsRQ1RQ2RQ3RQ4RQ5 Fine-Grained Code Clone Detection with Block-Based S…

MeterSphere压测,出现HttpHostConnectException

现象&#xff1a;MeterSphere更换压力机后&#xff0c;压测出现出现HttpHostConnectException 解决方案&#xff1a; net.ipv4.tcp_tw_reuse默认是0或者2&#xff0c;更改为1 net.ipv4.tcp_tw_reuse&#xff0c;表示是否允许重新应用处于TIME-WAIT状态的socket用于新的TCP连…

轻量级软件FastGithub实现稳定访问github

当我们想访问全球最大的“同性交友网站”https://github.com/ 时&#xff0c;总会出现无法访问的界面&#xff0c;令人非常苦恼&#xff1a;幸运的是&#xff0c;有一种轻量级的软件可以帮助我们稳定地访问GitHub&#xff0c;那就是FastGithub。 什么是FastGithub&#xff1f…

数据结构和算法(5):二叉树

树 向量允许通过下标或秩&#xff0c;在常数的时间内找到目标对象&#xff1b;然而&#xff0c;一旦需要对这类结构进行修改&#xff0c;那么无论是插入还是删除&#xff0c;都需要耗费线性的时间。 列表允许借助引用或位置对象&#xff0c;在常数的时间内插入或删除元素&…

去除pdf/word的水印艺术字

对于pdf中的水印如果无法去除水印&#xff0c;则先另存为word&#xff0c;然后再按下面办法处理即可&#xff1a; 查看宏&#xff0c;创建&#xff1a;删除艺术字 添加内容&#xff1a; Sub 删除艺术字()Dim sh As ShapeFor Each sh In ActiveDocument.ShapesIf sh.Type msoT…

用ASE制作地表积水效果

unity引擎制作实时刷下雨地面效果 大家好&#xff0c;我是阿赵。   之前在Unity引擎做了几种不同的效果&#xff0c;比如视差偏移、下雨效果、顶点颜色工具等。这一篇文章&#xff0c;将会把这几个效果合并在一起&#xff0c;做出一个混合积水地表的效果。这个几个shader的基…

基于elelemt-ui封装一个表单

子组件 searchForm <template><el-formref"form":model"value":rules"rules":label-width"labelWidth":inline"inline"><el-form-itemv-for"field in fields":key"field.slot":label&q…

JMeter基础 —— 使用Badboy录制JMeter脚本!

1、使用Badboy录制JMeter脚本 打开Badboy工具开始进行脚本录制&#xff1a; &#xff08;1&#xff09;当我们打开Badboy工具时&#xff0c;默认就进入录制状态。 如下图&#xff1a; 当然我们也可以点击录制按钮进行切换。 &#xff08;2&#xff09;在地址栏中输入被测地…

excel单元格多行文本的excel 提取 公式

excel单元格多行文本的excel 提取 公式 第一行&#xff1a; TRIM(MID(SUBSTITUTE(A$1,CHAR(10),REPT(" ",160)),ROW(A1)*160-159,160)) 第9行&#xff1a; TRIM(MID(SUBSTITUTE(A$1,CHAR(10),REPT(" ",160)),ROW(A9)*160-159,160)) Excel如何提取某一单元…