js实现websocket服务端和客户端

news2024/11/26 0:38:18

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


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


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

文章目录

  • 一、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);
	};
	
	// 关闭websocket
	ws.onclose = function(event)
	{ 
	  // 关闭 websocket
	  alert("连接已关闭..."); 
	};
    //发送给服务端的消息内容
    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.coloradmin.cn/o/1014902.html

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

相关文章

城市社交活动系统+附近交友资源类短视频APP源码

城市社交活动系统附近交友资源类短视频&#xff0c;注意只有安卓端源码&#xff01;

Python中Mock和Patch的区别

前言&#xff1a; 嗨喽~大家好呀&#xff0c;这里是魔王呐 ❤ ~! python更多源码/资料/解答/教程等 点击此处跳转文末名片免费获取 在测试并行开发&#xff08;TPD&#xff09;中&#xff0c;代码开发是第一位的。 尽管如此&#xff0c;我们还是要写出开发的测试&#xff0c…

【JavaSE笔记】数据类型与变量

一、前言 在Java这门“啰嗦”的编程语言中,我们必须弄清楚每种数据类型的性质和用途,才能让程序“说人话”。要成为Java高手&#xff0c;就必须与各种数据类型打成一片。 本文则将带你认识Java中常见的两位“角色”—数据类型与变量。 二、数据类型 在Java中数据类型主要分…

leetcode刷题(简单篇):9.回文数

9.回文数 题目描述&#xff1a;给你一个整数 x &#xff0c;如果 x 是一个回文整数&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 回文数是指正序&#xff08;从左向右&#xff09;和倒序&#xff08;从右向左&#xff09;读都是一样的整数。 例如&…

怒刷LeetCode的第2天(Java版)

目录 第一题 题目来源 题目内容 解决方法 方法一&#xff1a;滑动窗口 方法二&#xff1a;双指针加哈希表 第二题 题目来源 题目内容 解决方法 方法一&#xff1a;二分查找 方法二&#xff1a;归并排序 方法三&#xff1a;分治法 第三题 题目来源 题目内容 解…

理解HTTPS/TLS/SSL(二)可视化TLS握手过程并解密加密数据

文章目录 WireShark抓包TLS握手过程Client HelloServer HelloEncryped Extenstions, Certificate, Certificate VerifyChange Ciper Spec, FinshedTLS 1.2和TLS 1.3的区别能不能在进一步&#xff1f; 解密WireShark中抓到的TLS包参考资料 上一篇文章已经在本地使用了生成自签名…

从字符串中删除指定字符

任务描述 编写一个函数实现功能&#xff1a;从字符串中删除指定的字符。同一字母的大、小写按不同字符处理。例如&#xff1a;程序执行时输入字符串&#xff1a;turbo c and Borland c&#xff0c;从键盘输入字符n&#xff0c;则输出后变为&#xff1a;turbo c ad Borlad c。如…

【openscreen 】FrameId

当前同步的最新版测试代码中用到了FrameId类 Frameid E:\chromium\src\media\cast\common\frame_id.h属于第三方库:openscreen E:\chromium\src\third_party\openscreen\src\cast\streaming\frame_id.h 为啥我感觉是int64的? 支持+ <<

【C#】FileInfo类 对文件进行操作

提示&#xff1a;使用FileInfo类时&#xff0c;要引用System.IO命名空间。 using System.IO; FileInfo类 生成文件删除文件移动文件复制文件获取文件名判断文件是否存在属性列表其它常用方法 生成文件 Create()&#xff1a;在指定路径上创建文件。 FileInfo myFile new FileIn…

我们一直谈论“写代码”,但你会“读代码”吗?

编程&#xff0c;又被称作“写代码”&#xff0c;“敲代码”。 这个说法有可能会带来一点点误解&#xff0c;让人觉得如何“写”是学习编程要解决的主要问题。但事实并非如此。尽管最终代码要在键盘上敲出来&#xff0c;但这个过程在开发中的实际时间占比可能要远远小于你的预…

算法通过村第七关-树(递归/二叉树遍历)青铜笔记|手撕递归

文章目录 前言1. 递归的特征2. 如何写出好的递归3. 怎么看懂递归的代码总结 前言 提示&#xff1a;我们生活在24小时不眠不休的社会里但是没有24小时不眠不休的身体有些东西必须舍弃 -- 马特海格 这一关&#xff0c;我看要谈论的是递归问题&#xff0c;说到它就牵扯到很多问题了…

QT基础教学(QT对象间的关系)

文章目录 前言一、QT间的父子关系二、聚合关系三、组合关系四、关联关系五、依赖关系总结 前言 本篇文章我们来讲解QT对象间的关系&#xff0c;理清楚QT对象间的关系是非常重要的&#xff0c;没有理清楚QT间的对象关系可能会导致内存的泄漏等各种问题的出现。 资料合集地微信…

HarmonyOS开发:那些开发中常见的问题汇总(一)

前言 本来这篇文章需要讲述静态共享包如何实现远程依赖和上传以及关于静态共享包私服的搭建&#xff0c;非常遗憾的告诉大家&#xff0c;由于组织管理申请迟迟未通过&#xff0c;和部分文档官方权限暂未开放&#xff0c;关于这方面的讲解需要延后了&#xff0c;大概需要等到202…

HeyFriday AI:智能AI写作工具

【产品介绍】​ 名称 HeyFriday AI 具体描述​ HeyFriday是一款智能AI写作工具&#xff0c;可以帮助用户快速生成博客、广告、创意故事等各种类型的文本内容&#xff0c;节省时间和金钱。​HeyFriday的团队由前谷歌NLP科学家&#xff08;ALBERT的第一作者&#xff…

VIRTIO-BLK代码分析(5)virtqueue通信

virtqueue用于VIRTIO驱动和VIRTIO设备进行通信。每个VIRTIO设备可能有一个或多个virtqueue&#xff0c;VIRTIO-BLK的virtqueue数目可以通过num_queues设置。 通过函数vring_create_virtqueue创建virtqueue&#xff0c;通过函数virtqueue_add_sgs添加数据。目前存在split virtqu…

【网络编程】UDP Socket编程

UDP Socket编程 一. DatagramSocket二. DatagramPacket三. InetSocketAddress四. 执行流程五. 代码示例: UDP 回显服务器 数据报套接字&#xff1a; 使用传输层 UDP 协议 UDP: 即 User Datagram Protocol&#xff08;用户数据报协议&#xff09;&#xff0c;传输层协议。 UDP…

Jmeter系列-定时器Timers的基本介绍(11)

简介 JMeter中的定时器&#xff08;Timer&#xff09;是一种重要的元件&#xff0c;用于模拟用户在不同时间间隔内发送请求的场景。通过使用定时器&#xff0c;可以模拟负载、并发和容量等不同情况下的请求发送频率。 使用定时器 可以在取样器下添加定时器&#xff0c;这样定…

机器学习第五课--广告点击率预测项目以及特征选择的介绍

这个项目的主要的目的是通过给定的广告信息和用户信息来预测一个广告被点击与否。 如果广告有很大概率被点击就展示广告&#xff0c;如果概率低&#xff0c;就不展示。 因为如果广告没有被点击&#xff0c;对双方&#xff08;广告主、平台&#xff09;来讲都没有好处。所以预测…

应用商店优化之关键词优化指南1

提高我们应用在应用商店中的知名度&#xff0c;完全取决于关键词。找到一些关键词的策略之后&#xff0c;我们应该选择最有前途的关键词并对其进行研究&#xff0c;从而创建新的组合和长尾关键词。 1、寻找关键词&#xff0c;找到一些潜在的关键词创意。 尝试考虑一下我们将如…

Element表格之表头合并、单元格合并

一、合并表头 el-table配置 :header-cell-style"headFirst"headFirst({ row, colunm, rowIndex, columnIndex }) {let base { background-color: rgba(67, 137, 249, 0.3), color: #333, text-align: center };//这里为了是将第一列的表头隐藏&#xff0c;就形成了合…