制作了一个基于express + websocket.io的Nodejs聊天室
制作了一个基于express + websocket.io的Nodejs聊天室
呵呵 试了一下 挺好
制作了一个基于Express + WebSocket.io的Node.js聊天室
在这个项目中，我将向大家展示如何使用Node.js、Express框架以及WebSocket.io来创建一个简单的实时聊天室。通过这个聊天室，用户可以在浏览器中互相发送消息。
环境配置
首先，确保你的系统上已经安装了Node.js和npm。然后，在你的项目目录中初始化一个新的Node.js项目：
npm init -y接下来，安装必要的依赖包：
npm install express socket.io服务器端代码
创建一个名为server.js的文件，并添加以下代码：
const express = require('express');
const http = require('http');
const socketIo = require('socket.io');
// 初始化Express应用
const app = express();
const server = http.createServer(app);
// 配置静态资源目录
app.use(express.static('public'));
// 创建WebSocket服务
const io = socketIo(server);
// 监听连接事件
io.on('connection', (socket) => {
console.log('A user connected:', socket.id);
// 监听客户端发送的消息
socket.on('chat message', (msg) => {
console.log('message: ' + msg);
// 广播给所有连接的客户端
io.emit('chat message', msg);
});
// 当客户端断开连接时
socket.on('disconnect', () => {
console.log('User disconnected');
});
});
// 监听端口
server.listen(3000, () => {
console.log('Server is running on port 3000');
});客户端代码
在项目的public目录下创建一个index.html文件，并添加以下HTML和JavaScript代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WebSocket Chat Room</title>
</head>
<body>
<ul id="messages"></ul>
<input id="m" autocomplete="off" /><button onclick="sendMessage()">Send</button>
<script src="/socket.io/socket.io.js"></script>
<script>
const socket = io();
function sendMessage() {
const messageInput = document.getElementById('m');
const messageText = messageInput.value;
if (messageText) {
socket.emit('chat message', messageText);
messageInput.value = '';
}
}
socket.on('chat message', function(msg) {
const item = document.createElement('li');
item.textContent = msg;
document.getElementById('messages').appendChild(item);
});
</script>
</body>
</html>运行项目
在命令行中运行以下命令启动服务器：
node server.js现在，打开浏览器并访问http://localhost:3000，你就可以看到聊天室界面了。你可以尝试在不同的浏览器窗口或标签页中打开这个页面，以测试多用户之间的实时通信功能。
这个简单的例子展示了如何使用Express和WebSocket.io搭建一个基本的聊天室。你可以在此基础上进行扩展，例如添加用户身份验证、消息持久化等功能。
请问楼主，这个demo是在nodejs哪个版本上运行的？应该不在0.6.2版本上开发的吧？运行node chat.js 抛“can not find socket.io module”异常，请解释！！！谢谢！
要制作一个基于 Express 和 socket.io 的 Node.js 聊天室，你需要先设置一个基本的服务器环境，并使用 socket.io 来实现实时通信。以下是一个简单的实现步骤和示例代码。
步骤：
-
初始化项目:
mkdir chatroom cd chatroom npm init -y -
安装依赖:
npm install express socket.io -
创建服务器文件 (
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('New client connected'); socket.on('chat message', (msg) => { io.emit('chat message', msg); }); socket.on('disconnect', () => { console.log('Client disconnected'); }); }); server.listen(3000, () => { console.log('Listening on *:3000'); }); -
创建前端文件 (
public/index.html):<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Chat Room</title> </head> <body> <ul id="messages"></ul> <form action=""> <input id="m" autocomplete="off" /><button>Send</button> </form> <script src="/socket.io/socket.io.js"></script> <script> const socket = io(); const form = document.querySelector('form'); const input = document.getElementById('m'); const messages = document.getElementById('messages'); 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; messages.appendChild(item); window.scrollTo(0, document.body.scrollHeight); }); </script> </body> </html>
运行项目：
node server.js现在，你可以打开浏览器并访问 http://localhost:3000，就能看到一个简单的聊天室了。这个聊天室允许用户发送消息，并且所有连接的客户端都会实时接收到这些消息。
这样就完成了一个基于 Express 和 socket.io 的简单聊天室的开发。
