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.mzph.cn/news/80183.shtml

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

相关文章

vue2必备知识点

1、生命周期钩子是如何实现的? 生命周期描述beforeCreatevue实例初始化后&#xff0c;数据观测&#xff08;data observer&#xff09;和事件配置之前。data、computed、watch、methods都无法访问。createdvue实例创建完成后立即调用 &#xff0c;可访问 data、computed、wat…

华为云云耀云服务器L实例评测| ultralytics最先进模型YOLOv8深度学习AI训练

目录 前言 登录服务器 安装pyhton 部署yolov8 安装Pytorch 下载权重文件 训练模型 模型使用 前言 前几期我们在云耀云服务器L实例上分别使用docker和直接在centos上部署了yolov5识别API&#xff0c;前端项目vue&#xff0c;后端项目.net Core Web Api,但是从监控图上…

unity 实现多个物体或单个物体 让其单击物体让其显示再次单击让其隐藏

unity 实现单击物体让其显示或隐藏&#xff0c;再次单击显示或隐藏 using System.Collections; using System.Collections.Generic; using Unity.Burst.CompilerServices; using UnityEngine; using UnityEngine.EventSystems; public class ToggleObjects : MonoBehaviour {…

教育领域数据可视化:点亮知识之路

教育领域一直以来都在不断进步和演变&#xff0c;而数据可视化技术正在为这一领域带来一场革命。在过去的几年里&#xff0c;教育者们越来越意识到&#xff0c;通过将教育数据转化为可视化图表和图形&#xff0c;可以更好地理解学生的表现、需求和趋势&#xff0c;从而提供更好…

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

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

Scanner类用法(学习笔记)

Scanner类用法&#xff08;学习笔记&#xff0c;后续会补充&#xff09; 1.next&#xff08;&#xff09;用法 package com.yushifu.scanner; import java.util.Scanner;//util java工具包 //Scanner类&#xff08;获取用户的输入&#xff09; Scanner s new Scanner&#…

电子词典项目

目录 目录 头文件&#xff1a;dict.h: 源文件&#xff1a;dict.c: 服务器测试文件&#xff1a;serDict.c: 客户端测试文件&#xff1a;cliDict.c: 头文件&#xff1a;dict.h: #ifndef __DICT_H__ #define __DICT_H__ #include<myhead.h> #include<sqlite3.h>#de…

Android设备关机和重启分析

一、简介 重启(reboot) 使设备重新启动,即关闭设备并重新启动它。在重启期间,设备将经历完整的启动过程,包括重新加载操作系统和其他系统组件。这可以解决一些临时的系统问题,也可以应用系统更新或配置更改。 关机(shutdown) 使设备完全关闭,即停止设备的所有运行和…

06乐观锁与悲观锁

乐观锁与悲观锁 悲观锁: 悲观锁比较适合插入数据,简单粗暴但是性能一般 乐观锁: 比较适合更新数据, 性能好但是成功率低(多个线程同时执行时只有一个可以执行成功),还需要访问数据库造成数据库压力过大 模拟乐观锁实现流程 第一步: 数据库中增加商品表t_product并插入一条数…

MySQL索引使用

验证索引效率 在讲解索引的使用原则之前&#xff0c;先通过一个简单的案例&#xff0c;来验证一下索引&#xff0c;看看是否能够通过索引来提升 数据查询性能。在演示的时候&#xff0c;我们还是使用之前准备的一张表 tb_sku , 在这张表中准备了1000w 的记录。 这张表中id为主…

PostgreSQL 逻辑复制搭建

文章目录 前言1. 环境准备1.1 环境介绍1.2 发布端参数配置1.3 订阅端参数配置 2. 逻辑复制搭建2.1 创建逻辑复制用户2.2 发布节点造测试表2.3 发布节点授权2.4 创建 PUBLICATION2.5 订阅节点2.6 添加复制表2.7 删除复制任务 前言 本篇文章介绍 PostgreSQL 的搭建过程&#xff…

Linux抓包工具tcpdump

一、介绍 tcpdump是一个抓包工具&#xff0c;用于实时捕获和分析网络流量。它通常在unix和linux操作系统上使用。tcpdump能够捕获流经网络接口的数据包&#xff0c;并显示或保存它们以供进一步分析。它提供有关每个数据包的详细信息&#xff0c;包括源IP地址、目标IP地址、使用…

EDA(Exploratory Data Analysis)探索性数据分析

EDA(Exploratory Data Analysis)中文名称为探索性数据分析&#xff0c;是为了在特征工程或模型开发之前对数据有个基本的了解。数据类型通常分为两类&#xff1a;连续类型和离散类型&#xff0c;特征类型不同&#xff0c;我们探索的内容也不同。 1. 特征类型 1.1 连续型特征 …

每日一题(两数相加)

每日一题&#xff08;两数相加&#xff09; 2. 两数相加 - 力扣&#xff08;LeetCode&#xff09; 思路 思路&#xff1a; 由于链表从头开始向后存储的是低权值位的数据&#xff0c;所以只需要两个指针p1和p2&#xff0c;分别从链表的头节点开始遍历。同时创建一个新的指针new…

全球汽车安全气囊芯片总体规模分析

安全气囊系统是一种被动安全性的保护系统&#xff0c;它与座椅安全带配合使用&#xff0c;可以为乘员提供有效的防撞保护。在汽车相撞时&#xff0c;汽车安全气囊可使头部受伤率减少25%&#xff0c;面部受伤率减少80%左右。 汽车安全气囊芯片是整个系统的控制核心&#xff0c;并…

给微信小程序添加隐私协议

前些日子&#xff0c;微信官方针对用户的安全信息又进行了增强&#xff0c;这次更新几乎要求所有的小程序都需要进行整改&#xff0c;只要是涉及到用户的隐私的小程序都需要进行整改&#xff0c;这次整改是强制性的。 点开相关指引之后会跳转到下面的链接&#xff1a;参考链接…

【深度学习】Pytorch 系列教程(十一):PyTorch数据结构:3、变量(Variable)介绍

目录 一、前言 二、实验环境 三、PyTorch数据结构 0、分类 1、张量&#xff08;Tensor&#xff09; 2、张量操作&#xff08;Tensor Operations&#xff09; 3、变量&#xff08;Variable&#xff09; 一、前言 ChatGPT&#xff1a; PyTorch是一个开源的机器学习框架&am…

主题配置和 消息发送(一)KafkaTemplate 的使用

一、主题 1.1、配置主题 在应用程序上下文定义一个 KafkaAdmin Bean, 它可以自动将主题添加到代理。通过这个Bean可以将 每一个新建的主题 Topic 添加到应用程序上下文中。下面是一个简单的示例:也可以创建 TopicBuilder 类,使用它创建 Bean 更加简单。 @Bean public Kafka…

C++:string的模拟实现

目录 1.string的四大默认函数 1.1构造函数 1.2析构函数 1.3拷贝构造 1.4赋值运算符重载 2.访问string的三种方式 2.1[]访问 2.2迭代器访问 2.3范围for(本质是迭代器) 3.string相关功能的实现 3.1modify 3.2capacity 3.3access 3.4relations 3.5补充 4.补充 1.s…

C++之哈希表、哈希桶的实现

哈希表、哈希桶的实现 哈希概念哈希冲突哈希函数哈希冲突解决闭散列哈希表闭散列实现哈希表的结构哈希表的插入哈希表的查找哈希表的删除 开散列开散列概念哈希表的结构哈希表的插入哈希表的查找哈希表的删除 哈希概念 顺序结构以及平衡树中&#xff0c;元素关键码与其存储位置…