这是一个使用NodeJS、Socket.io和ExpressJS进行实时聊天的详细步骤:
(图片来源网络,侵删)1. 环境准备
在开始之前,确保你已经安装了Node.js和npm,如果没有,你可以从官方网站下载并安装。
2. 创建项目文件夹
在你的工作目录中创建一个新的文件夹,例如名为"realtimechat"。
3. 初始化项目
打开命令行工具,进入你刚刚创建的文件夹,然后运行以下命令来初始化你的项目:
npm init y
这将创建一个package.json文件。
4. 安装依赖
接下来,我们需要安装Express和Socket.io,运行以下命令:
npm install express socket.io
5. 创建服务器
在项目文件夹中创建一个名为"server.js"的文件,并在其中编写以下代码:
const express = require('express'); const http = require('http'); const socketIO = require('socket.io'); const app = express(); const server = http.createServer(app); const io = socketIO(server); app.use(express.static('public')); io.on('connection', (socket) => { console.log('A user connected'); socket.on('disconnect', () => { console.log('A user disconnected'); }); socket.on('chat message', (msg) => { io.emit('chat message', msg); }); }); server.listen(3000, () => { console.log('listening on *:3000'); });
这段代码创建了一个Express应用和一个HTTP服务器,并使用Socket.io将它们连接起来,当一个用户连接时,它会在控制台打印一条消息,当用户断开连接时,它也会打印一条消息,当收到一个’chat message’事件时,它会将消息广播给所有连接的用户。
6. 创建客户端
在项目文件夹中创建一个名为"public"的文件夹,并在其中创建一个名为"index.html"的文件,然后在其中编写以下HTML和JavaScript代码:
<!DOCTYPE html> <html> <head> <title>Realtime Chat</title> <style> /* Add some basic styling */ #messages { height: 300px; border: 1px solid #ccc; padding: 10px; overflowy: scroll; } #input { width: 98%; } </style> </head> <body> <div id="messages"></div> <form id="form" action=""> <input id="input" autocomplete="off" /><button>Send</button> </form> <script src="/socket.io/socket.io.js"></script> <script> const socket = io(); const form = document.getElementById('form'); const input = document.getElementById('input'); form.addEventListener('submit', e => { e.preventDefault(); if (input.value) { socket.emit('chat message', input.value); input.value = ''; } }); socket.on('chat message', msg => { const item = document.createElement('li'); item.textContent = msg; document.getElementById('messages').appendChild(item); window.scrollTo(0, document.body.scrollHeight); }); </script> </body> </html>
这个HTML文件创建了一个简单的聊天界面,用户可以在其中输入文本并按下发送按钮来发送消息,当用户提交表单时,它会阻止默认的提交行为,并通过Socket.io发送一个’chat message’事件,当它收到一个’chat message’事件时,它会将消息添加到消息列表中。
7. 启动服务器
回到命令行工具,运行以下命令来启动你的服务器:
node server.js
现在,你可以在浏览器中打开"http://localhost:3000",并开始实时聊天了。
最新评论
本站CDN与莫名CDN同款、亚太CDN、速度还不错,值得推荐。
感谢推荐我们公司产品、有什么活动会第一时间公布!
我在用这类站群服务器、还可以. 用很多年了。