【笑话集市】Nodejs聊天室美化，顺带加上聊天室成员
【笑话集市】Nodejs聊天室美化，顺带加上聊天室成员
欢迎各位noder 来访
源码地址：http://git.oschina.net/chenrh/node-joke 演示地址：http://115.28.50.138:3000/chat
10 回复
【笑话集市】Nodejs聊天室美化，顺带加上聊天室成员
欢迎各位noder来访！今天我们将一起探讨如何使用Node.js来创建一个既美观又实用的聊天室，并且在这个基础上增加显示聊天室当前在线成员的功能。
源码地址
https://git.oschina.net/chenrh/node-joke
演示地址
http://115.28.50.138:3000/chat
环境准备
首先确保你已经安装了Node.js和npm。接下来我们通过socket.io库来实现聊天室的基本功能，通过express库来搭建Web服务器。
npm install express socket.io
聊天室美化
我们可以使用HTML和CSS来美化我们的聊天室界面。这里我提供了一个简单的HTML模板：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>聊天室</title>
<style>
body { font-family: Arial, sans-serif; }
#chat { height: 400px; overflow-y: scroll; border: 1px solid #ccc; padding: 10px; }
input { width: calc(100% - 22px); padding: 10px; }
</style>
</head>
<body>
<div id="chat"></div>
<input type="text" id="message" placeholder="输入消息...">
<button onclick="sendMessage()">发送</button>
<script src="/socket.io/socket.io.js"></script>
<script>
const socket = io();
const chat = document.getElementById('chat');
function sendMessage() {
const messageInput = document.getElementById('message');
const messageText = messageInput.value;
if (messageText) {
socket.emit('message', messageText);
messageInput.value = '';
}
}
socket.on('message', function(msg) {
const item = document.createElement('p');
item.textContent = msg;
chat.appendChild(item);
chat.scrollTop = chat.scrollHeight;
});
</script>
</body>
</html>
显示聊天室成员
为了显示当前在线的用户，我们需要在后端维护一个用户列表，并通过Socket.IO广播给所有客户端。这里是一个简单的例子：
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);
let users = [];
io.on('connection', (socket) => {
console.log('A user connected:', socket.id);
socket.on('newUser', (username) => {
users.push({ id: socket.id, username });
io.emit('usersList', users.map(user => user.username));
});
socket.on('disconnect', () => {
users = users.filter(user => user.id !== socket.id);
io.emit('usersList', users.map(user => user.username));
console.log('A user disconnected:', socket.id);
});
socket.on('message', (msg) => {
io.emit('message', `${socket.id}: ${msg}`);
});
});
server.listen(3000, () => {
console.log('Server is running on port 3000');
});
在前端，我们需要更新HTML以显示当前在线用户列表：
<div id="chat"></div>
<ul id="users"></ul>
<input type="text" id="message" placeholder="输入消息...">
<button onclick="sendMessage()">发送</button>
<script>
// ... 其余代码不变 ...
socket.on('usersList', function(users) {
const usersList = document.getElementById('users');
usersList.innerHTML = '';
users.forEach(username => {
const li = document.createElement('li');
li.textContent = username;
usersList.appendChild(li);
});
});
</script>
通过上述步骤，你可以创建一个既美观又有互动功能的聊天室。希望这对你有所帮助！
【笑话集市】Nodejs聊天室美化，顺带加上聊天室成员
大家好！今天我将分享一个如何对现有的Node.js聊天室进行美化，并添加显示聊天室成员的功能。这个聊天室使用了基本的Node.js和Socket.IO技术。
源码地址
演示地址
示例代码
安装依赖
首先，确保你的项目中安装了以下依赖：
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);
let users = [];
io.on('connection', (socket) => {
console.log('New client connected');
socket.on('newUser', (name) => {
users.push({ id: socket.id, name });
io.emit('userList', users.map(user => user.name));
});
socket.on('disconnect', () => {
users = users.filter(user => user.id !== socket.id);
io.emit('userList', users.map(user => user.name));
});
socket.on('chatMessage', (msg) => {
io.emit('message', { name: users.find(user => user.id === socket.id).name, message: msg });
});
});
server.listen(3000, () => {
console.log('Server listening on port 3000');
});
客户端代码（client.js）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chat Room</title>
<style>
#chatbox {
width: 300px;
height: 400px;
border: 1px solid black;
overflow-y: scroll;
}
#users {
margin-top: 10px;
}
</style>
</head>
<body>
<div id="chatbox"></div>
<input type="text" id="username" placeholder="Enter your name">
<input type="text" id="message" placeholder="Enter a message">
<button onclick="sendMessage()">Send</button>
<div id="users"></div>
<script src="/socket.io/socket.io.js"></script>
<script>
const socket = io();
document.getElementById('username').addEventListener('change', (e) => {
socket.emit('newUser', e.target.value);
});
socket.on('userList', (users) => {
const usersDiv = document.getElementById('users');
usersDiv.innerHTML = `Users: ${users.join(', ')}`;
});
function sendMessage() {
const message = document.getElementById('message').value;
if (message) {
socket.emit('chatMessage', message);
}
}
socket.on('message', (data) => {
const chatbox = document.getElementById('chatbox');
chatbox.innerHTML += `<p><strong>${data.name}:</strong> ${data.message}</p>`;
chatbox.scrollTop = chatbox.scrollHeight;
});
</script>
</body>
</html>
解释
- 服务器端：监听客户端连接，并处理新用户加入、用户离开和发送消息等事件。同时，维护一个用户列表，并通过Socket.IO广播给所有连接的客户端。
- 客户端：实现用户输入用户名后加入聊天室，发送消息并显示其他用户的列表和聊天记录。
希望这个示例能帮助你更好地理解如何美化聊天室并添加聊天室成员功能。如果有任何问题或建议，请留言讨论！
