创建一个基于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://www.hqwc.cn/news/485271.html

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

相关文章

【2024.02.22】定时执行专家 V7.0 发布 - TimingExecutor V7.0 Release - 龙年春节重大更新版本

目录 ▉ 新版本 V7.0 下载地址 ▉ V7.0 新功能 ▼2024-02-21 V7.0 - 更新日志▼ ▉ V7.0 新UI设计 ▉ 新版本 V7.0 下载地址 BoomWorks软件的最新版本-CSDN博客文章浏览阅读10w次&#xff0c;点赞9次&#xff0c;收藏41次。▉定时执行专家—毫秒精度、专业级的定时任务执行…

大学生课程版|统计基础与python分析|一元线性回归

目录 1.一元线性回归的数学原理 2.一元线性回归的代码实现 2.1需要安装sklearn库 2.2绘制离散点图 2.3引入Scikit-Learn库搭建模型 2.4 模型预测 2.5 模型可视化 摘要&#xff1a;线性回归模型是利用线性拟合的方式来探寻数据背后的规律&#xff0c;如下图所示&#xff…

设计模式——抽象工厂模式

定义: 抽象工厂模式&#xff08;Abstract Factory Pattern&#xff09;提供一个创建一系列或相互依赖对象的接口&#xff0c;而无须指定它们具体的类。 概述:一个工厂可以提供创建多种相关产品的接口&#xff0c;而无需像工厂方法一样&#xff0c;为每一个产品都提供一个具体…

HarmonyOS—使用预览器查看应用/服务效果

DevEco Studio为开发者提供了UI界面预览功能&#xff0c;可以查看应用/服务的UI界面效果&#xff0c;方便开发者随时调整界面UI布局。预览器支持布局代码的实时预览&#xff0c;只需要将开发的源代码进行保存&#xff0c;就可以通过预览器实时查看应用/服务运行效果&#xff0c…

Jetpack Compose 可组合项的生命周期

点击查看&#xff1a;可组合项的生命周期 官网 在本页中&#xff0c;您将了解可组合项的生命周期以及 Compose 如何确定可组合项是否需要重组。 生命周期概览 正如管理状态文档中所述&#xff0c;一个组合将描述应用的界面&#xff0c;并通过运行可组合项来生成。组合是描述…

算能RISC-V通用云开发空间编译pytorch @openKylin留档

终于可以体验下risc-v了&#xff01; 操作系统是openKylin&#xff0c;算能的云空间 尝试编译安装pytorch 首先安装git apt install git 然后下载pytorch和算能cpu的库&#xff1a; git clone https://github.com/sophgo/cpuinfo.git git clone https://github.com/pytorc…

2.5网安学习第二阶段第五周回顾(个人学习记录使用)

本周重点 ①多进程和多线程 1、进程和线程 2、多线程爆破 ②Redis数据库 1、Redis的使用 2、Redis持久化 3、Redis未授权免密登录 ③嗅探和Python攻击脚本 1、嗅探&#xff08;端口扫描和IP扫描&#xff09; 2、SCAPY的应用 3、Python攻击脚本&#xff08;SYN半连接…

CI/CD 之 gitlab-runner 部署与踩坑

前言 去年花时间研究了一下 CI/CD , 自己部署了一套 gitlab-runner 玩了一下&#xff0c;部署过程之后遇到了不少问题&#xff0c;把之前的踩坑与部署记录分享一下。 简介 gitlab-runner是一个开源项目&#xff0c;用于运行 Pipeline 作业并将结果发送回 GitLab。 它与 Git…

NLP_构建GPT模型并完成文本生成任务

文章目录 搭建GPT模型&#xff08;解码器&#xff09;构建文本生成任务的数据集训练过程中的自回归文本生成中的自回归&#xff08;贪婪搜索&#xff09;完整代码小结 搭建GPT模型&#xff08;解码器&#xff09; GPT 只使用了 Transformer的解码器部分&#xff0c;其关键组件…

【探讨】光场显示技术的研究现状与发展趋势

摘要&#xff1a;目前常用的三维显示技术&#xff0c;一般是通过人眼的双目视差和视觉暂留效应实现的三维效果。由于丢失了深度信息&#xff0c;会引起辐辏调节冲突&#xff0c;使观看者产生不适感。光场显示是通过复现物体表面光线的真三维显示技术&#xff0c;其拥有良好的用…

Zabbix 远程监控主机

目录 1、安装 Zabbix 安装客户端 服务端测试通讯 Web页面添加主机 2、监控 Nginx 自定义脚本监控 Nginx web配置台 3、监控 MySQL 配置模版文件 配置Web界面 1、安装 Zabbix node-12 作为zabbix的被监控端&#xff0c;提供mysql服务器&#xff0c;配置zabbix监控node…

(HAL)STM32F103C6T8——软件模拟I2C驱动0.96寸OLED屏幕

一、电路接法 电路接法参照江科大视频。 二、相关代码及文件 说明&#xff1a;代码采用hal库&#xff0c;通过修改江科大代码实现。仅OLED.c文件关于引脚定义作了hal库修改&#xff0c;并将宏定义OLED_W_SCL(x)、OLED_W_SDA(x)作了相关修改。 1、OLED.c void OLED_I2C_Init(voi…