js实现websocket服务端和客户端

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


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


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

文章目录

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


感谢阅读,祝君暴富!

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

idea移除许可证

目录 一、介绍 二、操作步骤 一、介绍 当自己的idea日期要到了&#xff0c;又想续上&#xff0c;但是覆盖不了之前的日期&#xff0c;新的没办法生效。那么就要把原先的许可证先移除&#xff0c;再重新续上新的。 二、操作步骤 1.点击idea的右上角的这个展开 2.选择帮助…

【简单教程】利用Net2FTP构建免费个人网盘,实现便捷的文件管理

文章目录 1.前言2. Net2FTP网站搭建2.1. Net2FTP下载和安装2.2. Net2FTP网页测试 3. cpolar内网穿透3.1.Cpolar云端设置3.2.Cpolar本地设置 4.公网访问测试5.结语 1.前言 文件传输可以说是互联网最主要的应用之一&#xff0c;特别是智能设备的大面积使用&#xff0c;无论是个人…

tuxera ntfs 2023 破解安装包最新百度网盘下载地址

tuxera ntfs 2023 破解安装包是一个mac读写ntfs磁盘工具允许您访问&#xff0c;它允许您访问 NFTS 驱动器上的文件。该应用程序提供访问访问 Mac 设备中 NFTS 格式文件的驱动力&#xff0c;因此您有权基于格式文件进行无困难的访问 Windows 数据。在发生电力灾难或断电时使用防…

算法训练 第二周

二、反转链表 本题给我们了一个单链表的头节点head&#xff0c;要求我们把这个单链表的连接顺序进行逆置&#xff0c;并返回逆置后的链表头节点。 1.头插法 我们需要先创建一个新的头节点ph&#xff0c;然后遍历给出的单链表&#xff0c;把遍历到的每一个节点用头插法接到ph的…

3D数字孪生:从3D数据采集到3D内容分析

数字孪生&#xff08;Digital Twin&#xff09;是物理对象、流程或系统的虚拟复制品&#xff0c;用于监控、分析和优化现实世界的对应物。 这些数字孪生在制造、工程和城市规划等领域变得越来越重要&#xff0c;因为它们使我们能够在现实世界中实施改变之前模拟和测试不同的场景…

算法宝典2——Java版本(此系列持续更新,这篇文章目前3道)(有题目的跳转链接)(此份宝典包含了二叉树的算法题)

注&#xff1a;由于字数的限制&#xff0c;我打算把算法宝典做成一个系列&#xff0c;一篇文章就20题&#xff01;&#xff01;&#xff01; 目录 一、二叉树的算法题&#xff08;目前3道&#xff09; 1. 平衡二叉树&#xff08;力扣&#xff09; 2. 对称二叉树&#xff0…

MySQL最新版8.1.0安装配置教程

目录 目录 前言 安装流程图 1&#xff0c;MySQL数据库是什么? 2&#xff0c;下载zip压缩包 3&#xff0c;解压到要安装的目录 4,添加环境变量 4.1,找到环境变量 4.2,进行环境变量的添加 5.新建mysql 配置文件 6、安装mysql服务 7、初始化数据文件 8、启动mysql …

Java面向对象编程

下列关于线性链表的叙述中&#xff0c;正确的是&#xff08; &#xff09; A. 各数据结点的存储空间可以不连续&#xff0c;但它们的存储顺序与逻辑顺序必须一致 B. 各数据结点的存储顺序与逻辑顺序可以不一致&#xff0c;但它们的存储空间必须连续 C. 进行插入与删除时&#x…

gitlab操作

1. 配置ssh 点击访问 2. 创建新分支与切换新分支 git branch 新分支名 // 创建 git checkout 新分支名 // 切换到新分支3. 查看当前分支 git branch*所指的就是当前所在分支 4. 本地删除文件后与远程git同步 git add -A git commit -m "del" git push

如何根据性能需求进行场景设计?

场景设计一 探索 测试环境 客户端: win10 这里可以用linux,但没用,因为想直观查看结果。 被测环境:linux X86 4核CPU16G内存 被测接口:登录接口,没有做数据驱动。 在测试执行前,先使用influxSQL把influxdb的数据清理一下,以防影响结果查看。 有这么一个需求,要求系…

cs224w_colab3_2023 And cs224w_colab4_2023学习笔记

class GNNStack(torch.nn.Module):def __init__(self, input_dim, hidden_dim, output_dim, args, embFalse):super(GNNStack, self).__init__() #这里的继承表示参见 https://blog.csdn.net/wanzew/article/details/106993425 # 继承时运行继承类别的函数 总之 __mro__的目的…

银河麒麟操作系统安装人大金仓数据库--九五小庞

一、环境要求 硬件&#xff1a;内存512M以上&#xff0c;磁盘空间10G以上软件&#xff1a;主流Linux操作系统&#xff0c;本机使用kylin-v10安装包准备&#xff1a;官网下载数据库文件镜像以及授权文件 https://www.kingbase.com.cn/rjcxxz/index.htm 二、配置内核参数 vim /e…

flink-1.14.4启动报错setPreferCheckpointForRecovery(Z)v

从flink1.12升级到flink1.14&#xff0c;修改了pom.xml的flink-version&#xff0c;打包的时候发现报错&#xff1a; // 当有较新的 Savepoint 时&#xff0c;作业也会从 Checkpoint 处恢复env.getCheckpointConfig().setPreferCheckpointForRecovery(true); 于是屏蔽了这段配置…

C++中的导入include,头文件,extern,main函数入口及相关编译流程

结论&#xff1a; 1&#xff1a;#include就是复制粘贴 2&#xff1a;C编译的时候&#xff0c;在链接之前&#xff0c;各个文件之间实际上没有联系&#xff0c;只有到了链接的阶段&#xff0c;系统才会到各个cpp文件中去找需要的文件&#xff1b; 一&#xff1a;include的作用…

MCU软核 3. Xilinx Artix7上运行cortex-m3软核

0. 环境 - win10 vivado 2018.3 keil mdk - jlink - XC7A35TV12 1. 下载资料 https://keilpack.azureedge.net/pack/Keil.V2M-MPS2_DSx_BSP.1.1.0.pack https://gitee.com/whik/cortex_m3_on_xc7a100t 2. vivado 2018 Create Project -> Next -> -> Project n…

timer trigger function

创建&#xff08;使用vscode&#xff09; 选择Timer trigger 命名 设置多久触发一次&#xff08;该语句是5分钟一次&#xff09; 创建完成 在下面直接编辑想要运行的代码。

Redis-渐进式遍历scan的使用

目录 1、为什么使用渐进式遍历&#xff1f; 2、scan的使用 3、渐进式遍历的缺点 4、补充知识点&#xff1a;redis中也区分database 1、为什么使用渐进式遍历&#xff1f; 前面的博客中&#xff0c;我们有提到使用keys *来获取所有的key&#xff0c;但这种办法&#xff0c;…

看好多人都在劝退学计算机,可是张雪峰又 推荐过计算机,所以计算机到底是什么样 的?

张雪峰高考四百多分&#xff0c;但是他现在就瞧不起400多分的学生。说难听点&#xff0c;六七百分的 热门专业随便报谁不会啊&#xff1f; 计算机专业全世界都是过剩的&#xff0c;今年桂林电子科技&#xff0c;以前还是华为的校招大学&#xff0c;今年 计算机2/3待业。这个世…

golang iris框架 + linux后端运行

go mod init myappgo get github.com/kataras/iris/v12latestpackage mainimport "github.com/kataras/iris/v12"func main(){app : iris.New()app.Listen(":port") }打包应用 go build main.go开启服务 #nohup ./程序名称 nohup ./main关闭后台 #ps -e…

电荷型 和 IEPE/ICP型振动传感器的比较

PE(压电式)和IEPE(集成电路压电式,PCB公司叫做ICP)传感器的对比说明,供各位参考。 1. PE/IEPE传感器的敏感元件均为压电晶体,通过压电效应感受被测物理量。 2.PE传感器:输出电荷量,也叫电荷传感器。不需要供电,两根信号线,可直接接入电荷放大器进行测量。 优点―――结…