Nodejs 后台实现的WebSocket漂流瓶应用，欢迎多多给意见啊
Nodejs 后台实现的WebSocket漂流瓶应用，欢迎多多给意见啊
应该说整个后台网址也是nodejs写的 通信是websockt协议，已经打通了android端和ios端，欢迎多多给意见啊！！！！！！！！ 在应用里，可以随机交友哦，还可以语音，涂鸦，图片聊天的 网址是：http://driftbottle.kd128.com
7 回复
Node.js 后台实现的 WebSocket 漂流瓶应用
背景介绍
在这个项目中，我使用 Node.js 实现了一个基于 WebSocket 的应用，允许用户随机交友、进行语音聊天、涂鸦以及图片聊天。目前，该应用已成功实现了 Android 和 iOS 端的通信。
技术栈
- 后端: Node.js
- WebSocket: 使用
ws库 - 前端: HTML, CSS, JavaScript (客户端)
项目结构
drift-bottle/
├── config/
│ └── serverConfig.js
├── public/
│ ├── index.html
│ ├── styles.css
│ └── scripts.js
├── server/
│ ├── app.js
│ ├── socket.js
│ └── user.js
└── package.json
示例代码
1. 安装依赖
npm install express ws
2. 配置文件 (config/serverConfig.js)
module.exports = {
port: 3000,
host: 'localhost'
};
3. 服务器主文件 (server/app.js)
const express = require('express');
const http = require('http');
const { Server } = require("socket.io");
const app = express();
const server = http.createServer(app);
const io = new Server(server);
require('./socket')(io); // 引入WebSocket逻辑
app.use(express.static('public'));
server.listen(3000, () => {
console.log(`Server running on ${serverConfig.host}:${serverConfig.port}`);
});
4. WebSocket 处理 (server/socket.js)
const users = {};
module.exports = (io) => {
io.on('connection', (socket) => {
console.log('a user connected');
socket.on('join', (username) => {
users[socket.id] = username;
socket.broadcast.emit('newUser', username);
});
socket.on('send_message', (data) => {
const { to, message } = data;
socket.to(to).emit('message', { from: users[socket.id], message });
});
socket.on('disconnect', () => {
console.log(`${users[socket.id]} disconnected`);
delete users[socket.id];
});
});
};
5. 前端页面 (public/index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Drift Bottle</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="chat-box"></div>
<input type="text" id="username" placeholder="Enter your name">
<button onclick="join()">Join Chat</button>
<input type="text" id="message" placeholder="Type a message">
<button onclick="sendMessage()">Send</button>
<script src="/socket.io/socket.io.js"></script>
<script src="scripts.js"></script>
</body>
</html>
6. 前端脚本 (public/scripts.js)
let socket;
function join() {
const username = document.getElementById('username').value;
socket = io();
socket.emit('join', username);
}
function sendMessage() {
const message = document.getElementById('message').value;
socket.emit('send_message', { to: 'random', message });
}
总结
这个简单的 WebSocket 漂流瓶应用展示了如何使用 Node.js 和 WebSocket 进行实时通信。通过这种方式，用户可以在应用中随机交友并进行即时消息交流。欢迎提出宝贵的意见和建议！
访问网址
您可以通过以下链接访问该应用：
针对你的需求，我们可以设计一个简单的 WebSocket 漂流瓶应用。以下是一个基本的 Node.js 示例代码，使用 ws 库来实现 WebSocket 服务。该应用将支持用户发送和接收漂流瓶消息。
示例代码
首先，确保安装了 ws 库：
npm install ws
接下来，创建一个文件 server.js：
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });
wss.on('connection', function connection(ws) {
console.log("A new client Connected!");
ws.on('message', function incoming(message) {
console.log('received: %s', message);
// 广播消息给所有连接的客户端
wss.clients.forEach(function each(client) {
if (client !== ws && client.readyState === WebSocket.OPEN) {
client.send(message);
}
});
});
ws.send('Welcome to the WebSocket server!');
});
console.log('WebSocket server is running on ws://localhost:8080');
运行服务器
保存上述代码后，在命令行中运行：
node server.js
现在服务器应该在 ws://localhost:8080 上运行。
客户端代码
这里是一个简单的 HTML 客户端代码片段，用于测试 WebSocket 服务：
<!DOCTYPE html>
<html>
<head>
<title>WebSocket Test</title>
</head>
<body>
<script>
var ws = new WebSocket("ws://localhost:8080");
ws.onopen = function() {
console.log("Connected to WebSocket server.");
ws.send("Hello, Server!");
};
ws.onmessage = function(event) {
console.log("Received from server: " + event.data);
};
ws.onclose = function() {
console.log("Disconnected from WebSocket server.");
};
</script>
</body>
</html>
解释
- 服务器：监听连接，并在接收到消息时广播到所有客户端。
- 客户端：建立 WebSocket 连接，发送和接收消息。
扩展功能
你可以进一步扩展此应用，添加身份验证、消息过滤、存储消息记录等功能。如果需要更复杂的交互（如语音、涂鸦、图片），可以考虑集成第三方服务或库来处理这些多媒体数据。
希望这个示例对你有所帮助！如果你有任何具体问题或需求，欢迎继续讨论！
