Chat app using Socket IO and Node JS

创作时间:

作者:

@小白创作中心

Chat app using Socket IO and Node JS

引用

来源

https://www.geeksforgeeks.org/how-to-create-a-chat-app-using-socket-io-node-js/

Socket.IO 是一个基于 JavaScript 的库，它在 WebSocket 之上提供了额外的功能，如自动重连、广播和回退选项，使得客户端和服务器之间的实时双向事件通信成为可能。本文将介绍如何使用 Socket.IO 和 NodeJS 创建一个实时聊天应用。

什么是 Socket.IO？

Socket.IO 是一个 JavaScript 库，它在 WebSocket 之上提供了额外的功能，如自动重连、广播和回退选项，使得客户端和服务器之间的实时双向事件通信成为可能。

我们将要创建什么？

在这篇文章中，我们将创建一个使用 Socket.IO 和 NodeJS 的实时聊天应用。该应用将具备以下功能：

多用户之间无需页面刷新即可实现实时通信
实时发送和接收消息，在所有连接的客户端上即时显示消息
使用 HTML、CSS（Tailwind CSS）和 JavaScript 构建的简单响应式聊天界面
在聊天室中向所有客户端广播消息
支持用户名和消息体的自定义
完全功能的系统，用户可以看到实时输入和发送的消息

为什么使用 Socket.IO？

提供客户端和服务器之间的实时通信
支持向多个客户端广播消息
即使 WebSocket 不可用，也能通过轮询作为回退选项
易于实现和扩展，可以添加额外的功能，如聊天室

使用 Socket.IO 和 NodeJS 构建实时聊天应用是学习全栈开发的一个很好的方式。

实现思路

实时通信：使用 Socket.IO 实现用户之间无需页面刷新即可实时交换消息
服务器设置：服务器运行在 ExpressJS 上，处理连接并发送聊天页面给用户
发送和接收消息：当用户输入消息时，Socket.IO 将其发送到服务器，服务器再将其广播给所有连接的用户
更新聊天内容：新消息一到达，就会立即在所有用户的屏幕上显示
多用户支持：由于 Socket.IO 支持广播，聊天室中的每个用户都能实时看到所有消息

项目搭建步骤

这里是一个结构化的项目搭建指南：

创建项目目录

mkdir chat-app && cd chat-app
npm init -y

初始化 NodeJS 项目
```
npm init -y
```
安装依赖
```
npm install express socket.io
```
创建项目文件
```
touch index.html index.js
```

项目结构

最终的文件结构应该如下所示：

实现代码

下面是使用 Socket.IO 和 NodeJS 创建实时聊天应用的完整代码实现：

HTML 部分

<html>
<head>
 <title>Chat app using Socket IO and Node JS</title>
 <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
 <h1 class="font-bold text-green-500 
 text-3xl text-center mt-5">
 GeeksforGeeks
 </h1>
 <div>
 <h2 class="font-semibold text-xl 
 text-center mt-5" 
 id="logo">
 Chat App using Socket io
 </h2>
 </div>
 <form class="flex flex-col justify-center 
 items-center mt-5" 
 id="form">
 <input class="border border-gray-400 
 rounded-md mt-5 p-1" 
 type="text" 
 placeholder="Name" 
 id="myname">
 <input class="border border-gray-400 
 rounded-md mt-5 p-1" 
 type="text" 
 placeholder="Message" 
 id="message">
 <button class="bg-blue-500 rounded-md p-2 
 text-white mt-5">
 Send
 </button>
 </form>
 <div class="flex flex-col justify-center 
 items-center mt-5" 
 id="messageArea">
 </div>
</body>
<script src="/socket.io/socket.io.js"></script>
<script>
 let socket = io();
 let form = document.getElementById('form');
 let myname = document.getElementById('myname');
 let message = document.getElementById('message');
 let messageArea = document.getElementById("messageArea");
 form.addEventListener("submit", (e) => {
 e.preventDefault();
 if (message.value) {
 socket.emit('send name', myname.value);
 socket.emit('send message', message.value);
 message.value = "";
 }
 });
 socket.on("send name", (username) => {
 let name = document.createElement("p");
 name.style.backgroundColor = "grey";
 name.style.width = "100%";
 name.style.textAlign = "center";
 name.style.color = "white";
 name.textContent = username + ":";
 messageArea.appendChild(name);
 });
 socket.on("send message", (chat) => {
 let chatContent = document.createElement("p");
 chatContent.textContent = chat;
 messageArea.appendChild(chatContent);
 });
</script>
</html>

JavaScript 部分

//index.js
const express = require('express');
const app = express();
const { Server } = require('socket.io');
const http = require('http');
const server = http.createServer(app);
const io = new Server(server);
const port = 5000;
app.get('/', (req, res) => {
 res.sendFile(__dirname + '/index.html');
});
io.on('connection', (socket) => {
 socket.on('send name', (username) => {
 io.emit('send name', (username));
 });
 socket.on('send message', (chat) => {
 io.emit('send message', (chat));
 });
});
server.listen(port, () => {
 console.log(`Server is listening at the port: ${port}`);
});