创建一个基于Node.js的实时聊天应用

在当今数字化社会,实时通讯已成为人们生活中不可或缺的一部分。无论是在社交媒体平台上与朋友交流,还是在工作场合中与同事协作,实时聊天应用都扮演着重要角色。与此同时,Node.js作为一种流行的后端技术,为开发者提供了强大的工具和灵活的环境,使得创建实时聊天应用变得轻而易举。

在本篇博客中,我们将探讨如何利用Node.js构建一个基于WebSocket协议的实时聊天应用。WebSocket是一种在单个TCP连接上提供全双工通信的协议,适用于需要实时性的应用场景,比如在线游戏、实时监控以及聊天应用。

首先,我们需要创建一个基本的Node.js应用,并安装一些必要的依赖。在命令行中运行以下命令:

mkdir real-time-chat
cd real-time-chat
npm init -y
npm install express ws

上面的命令中,我们创建了一个名为real-time-chat的项目,并安装了Express框架和ws模块,分别用于处理HTTP请求和WebSocket连接。

接下来,我们来编写服务器端的代码。在项目根目录下创建一个名为server.js的文件,并添加以下代码:

const express = require('express');
const http = require('http');
const WebSocket = require('ws');const app = express();
const server = http.createServer(app);
const wss = new WebSocket.Server({ server });wss.on('connection', (ws) => {ws.on('message', (message) => {wss.clients.forEach((client) => {if (client !== ws && client.readyState === WebSocket.OPEN) {client.send(message);}});});
});server.listen(3000, () => {console.log('Server started on http://localhost:3000');
});

在上面的代码中,我们创建了一个Express应用,并在3000端口启动了一个HTTP服务器。同时,我们使用WebSocket模块创建了一个WebSocket服务器,并实现了简单的消息广播功能。

现在,我们已经完成了服务器端的搭建。接下来,我们需要创建一个简单的客户端界面来与服务器通信。在项目根目录下创建一个名为index.html的文件,并添加以下代码:

<!DOCTYPE html>
<html>
<head><title>Real Time Chat</title>
</head>
<body><input type="text" id="message" placeholder="Type your message here"><button onclick="sendMessage()">Send</button><ul id="chat"></ul><script>const socket = new WebSocket('ws://localhost:3000');const chat = document.getElementById('chat');socket.onmessage = (event) => {const li = document.createElement('li');li.textContent = event.data;chat.appendChild(li);};function sendMessage() {const message = document.getElementById('message').value;socket.send(message);}</script>
</body>
</html>

在上面的代码中,我们创建了一个简单的HTML界面,包括一个文本输入框用于输入消息、一个发送按钮和一个用于显示聊天消息的列表。通过WebSocket与服务器建立连接,并实现了接收和发送消息的功能。

最后,我们启动服务器并在浏览器中打开index.html文件,即可看到实时聊天应用的界面。您可以在同一台机器上打开多个浏览器窗口,模拟多人聊天的场景,体验实时通讯的魅力。

通过本篇博客的介绍,您学会了如何利用Node.js和WebSocket创建一个简单的实时聊天应用。当然,这只是一个入门级的示例,在实际应用中还有很多功能和性能优化的空间。希望本文能对您有所启发,让您深入了解实时通讯技术,不断完善和优化您的应用。

Node.js视频教程请点击:Node.js从基础到项目实践_在线视频教程-CSDN程序员研修院

最后问候亲爱的朋友们,并邀请你们阅读我的(博主简介)全新著作。
在这里插入图片描述

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

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

相关文章

Linux修改shell工具连接端口

nano /etc/ssh/sshd_config 或者 vi /etc/ssh/sshd_config 或者 vim /etc/ssh/sshd_config

2024最新版(黑客技术)零基础入门自学网络安全

一、自学网络安全学习的误区和陷阱 1.不要试图先以编程为基础的学习再开始学习 我在之前的回答中&#xff0c;我都一再强调不要以编程为基础再开始学习网络安全&#xff0c;一般来说&#xff0c;学习编程不但学习周期长&#xff0c;而且实际向安全过渡后可用到的关键知识并不…

如何连接ACL认证的Redis

点击上方蓝字关注我 应用程序连接开启了ACL认证的Redis时与原先的方式有差别&#xff0c;本文介绍几种连接开启ACL认证的Redis的Redis的方法。 对于RedisACL认证相关内容&#xff0c;可以参考历史文章&#xff1a; Redis权限管理体系(一&#xff09;&#xff1a;客户端名及用户…

AIGC 实战:Ollama 和 Hugging Face 是什么关系?

Ollama和 Hugging Face 之间存在着双重关系&#xff1a; 1. Ollama是 Hugging Face 开发并托管的工具&#xff1a; Ollama是一个由 Hugging Face 自行开发的开源项目。它主要用于在本地运行大型语言模型 (LLM)&#xff0c;特别是存储在 GPT 生成的统一格式 (GPT-Generated Un…

【Java程序设计】【C00296】基于Springboot的4S车辆管理系统(有论文)

基于Springboot的4S车辆管理系统&#xff08;有论文&#xff09; 项目简介项目获取开发环境项目技术运行截图 项目简介 这是一个基于Springboot的4S店车辆管理系统 本系统分为销售员功能模块、管理员功能模块以及维修员功能模块。 管理员功能模块&#xff1a;管理员登录进入4S…

招聘APP开发实践:技术选型、架构设计与开发流程

时下&#xff0c;招聘APP成为了企业和求职者之间连接的重要纽带。本文将深入探讨招聘APP的开发实践&#xff0c;重点关注技术选型、架构设计以及开发流程等关键方面&#xff0c;带领读者走进这一充满挑战与机遇的领域。 一、技术选型 在开始招聘APP的开发之前&#xff0c;首…

MacOs 围炉夜话

文章目录 一、安装 Mac 一、安装 Mac macOS是一套由苹果开发的运行于Macintosh系列电脑上的操作系统。macOS是首个在商用领域成功的图形用户界面操作系统。 VM虚拟机怎么安装mac os&#xff1f;&#xff08;全教程&#xff09; 虚拟机&#xff1a;VMware Workstation 17 pro W…

解锁创意灵感,探索FlutterExampleApps项目的奥秘

解锁创意灵感&#xff0c;探索FlutterExampleApps项目的奥秘 项目简介 FlutterExampleApps项目是一个包含各种示例应用链接的仓库&#xff0c;旨在演示Flutter应用开发中的各种功能、特性和集成。 项目包含了以下几个部分&#xff0c;每个部分都涵盖了不同的内容和主题&…

HTML5和CSS3提高

一、HTML5的新特性 增加了一些新的标签&#xff0c;新的表单&#xff0c;新的表单属性&#xff0c;IE9以上版本的浏览器才支持 注意&#xff1a; 这些语义化标准主要针对搜索引擎的 新标签可以使用多次 在IE9中需要把这些元素转化为块级元素 新增的多媒体标签 主要包含两个…

Ansible 更换aliyun 镜像 并下载tree

目录 查看系统版本找到对应 的版本对当前镜像进行备份下载aliyuan更换成功安装扩展源更换源之后 的三个命令 这里安装一个aliyun 的镜像 本案例 仅供实验参考 生产环境中请谨慎使用 查看系统版本 先查看linux 的系统 版本 ansible slave -m shell -a uname -a找到对应 的版本…

【Vue渗透】Vue Devtools 浏览器插件

下载地址 Vue Devtools 浏览器插件 Vue站点渗透思路 【Vue渗透】Vue站点渗透思路 简介 Vue Devtools 是 Vue 官方发布的调试浏览器插件&#xff0c;可以安装在 Chrome 和 Firefox 等浏览器上&#xff0c;直接内嵌在开发者工具中&#xff0c;使用体验流畅。Vue Devtools 由…

私域运营-需要认清的事实

一、私域不能单纯依靠微信渠道 误区&#xff1a;很多企业仍停留在如何让用户在微信去分享裂变&#xff0c;然后带动新用户的阶段。 私域的核心在于“开源节流”&#xff0c;就是如何通过更多渠道获取更多客户&#xff0c;并且避免客户的批量流失。 私域讲究的是如何从公域的“…

ETL:数据转换与集成的关键过程

ETL&#xff1a;数据转换与集成的关键过程 在现代数据驱动的世界中&#xff0c;有效地管理和处理数据对于企业的成功至关重要。ETL&#xff08;提取、转换、加载&#xff09;是一种关键的数据处理过程&#xff0c;有助于将数据从源系统提取、清洗、转换并加载到目标系统中&…

电商数据API接口 | 节省你的电商数据采集成本

1、将数据采集的整体成本降低55%。在电商API接口负责了整个数据采集流程后&#xff0c;这家电商公司成功节约了维护和开发上的成本。 2、电商爬虫API可以从极复杂的来源中采集数据&#xff0c;确保完整交付。在电商爬虫API的帮助下&#xff0c;该公司现在可以获取完成业务目标所…

MySQL数据库调优之关联查询、排序查询、分页查询、Group by优化

关联查询优化 1.准备工作 CREATE TABLE IF NOT EXISTS type(id INT(10) UNSIGNED NOT NULL AUTO_INCREMENT,card INT(10) UNSIGNED NOT NULL,PRIMARY KEY(id));CREATE TABLE IF NOT EXISTS book( bookid INT(10) UNSIGNED NOT NULL AUTO_INCREMENT, card INT(10) UNSIGNED N…

JavaSE-04笔记【面向对象01】

文章目录 1. final 关键字1.1 采用final修饰的类不能被继承1.2 采用 final 修饰的方法不能被覆盖1.3 采用 final 修饰的变量(基本类型)不能被修改1.4 采用final 修饰的变量必须显示初始化1.5 如果修饰的引用&#xff0c;那么这个引用只能指向一个对象&#xff0c;也就是说这个引…

利用LaTex批量将eps转pdf、png转eps、eps转png、eps转svg、pdf转eps

1、eps转pdf 直接使用epstopdf命令&#xff08;texlive、mitex自带&#xff09;。 在cmd中进入到eps矢量图片的目录&#xff0c;使用下面的命令&#xff1a; for %f in (*.eps) do epstopdf "%f" 下面是plt保存eps代码&#xff1a; import matplotlib.pyplot as…

STP基本计算过程——选举非根交换机的根端口(二)

点赞关注&#xff0c;持续更新STP专题 选举非根交换机的根端口 1.STP为每个非根交换机选举根端口&#xff08;Root Port&#xff09;。 2. 交换机的每个端口都有一个端口开销&#xff08;Port Cost&#xff09;的参数&#xff0c;此参数表示数据从该端口发送时的开销值&#x…

2024年度中国5G随身WiFi品牌排行榜

【中国品牌网中国3C质量评测中心权威榜单联合发布】 第一名&#xff1a;格行 优势&#xff1a;作为随身WiFi行业的佼佼者&#xff0c;格行凭借其15年的物联网行业经验&#xff0c;在技术研发、产品创新及客户服务上均享有盛誉。其5G随身WiFi产品网络稳定&#xff0c;客户满意度…

windows 中, bash: conda: command not found(已解决)

git bash 中运行conda命令&#xff0c;出现这种错误&#xff0c;原因是你没有在git bash中 配置conda&#xff0c;导致git bash无法找到conda 那就配置一下&#xff0c;找到你的conda的安装位置下的bash.sh文件&#xff0c;一般在安装位置&#xff08;我的安装在C盘的自定义路径…