使用Node.js完成一个支持两人的聊天室小程序,实现消息收发。给出具体代码和实现过程
时间: 2024-04-15 09:27:14 浏览: 16
当然,我可以帮你完成这个任务。下面是一个使用 Node.js 和 Socket.io 来创建一个简单的聊天室的示例代码。
首先,你需要安装 Node.js,然后创建一个新的文件夹,进入该文件夹并打开终端。
然后,你可以通过命令行来安装所需的依赖项。运行以下命令:
```
npm init -y
npm install express socket.io
```
接下来,创建一个名为 `server.js` 的文件,并将以下代码添加到其中:
```javascript
const express = require('express');
const app = express();
const http = require('http').Server(app);
const io = require('socket.io')(http);
// 设置静态文件目录
app.use(express.static(__dirname + '/public'));
// 当有新的客户端连接时触发
io.on('connection', (socket) => {
console.log('a user connected');
// 监听客户端发送的消息
socket.on('chat message', (msg) => {
console.log('message: ' + msg);
// 将消息广播给所有连接的客户端
io.emit('chat message', msg);
});
// 当有客户端断开连接时触发
socket.on('disconnect', () => {
console.log('user disconnected');
});
});
// 启动服务器
const port = 3000;
http.listen(port, () => {
console.log(`Server is running on port ${port}`);
});
```
然后,创建一个名为 `index.html` 的文件,并将以下代码添加到其中:
```html
<!DOCTYPE html>
<html>
<head>
<title>Chat Room</title>
<style>
body { margin: 0; padding: 20px; font-family: Arial, sans-serif; }
#messages { margin-bottom: 10px; }
</style>
</head>
<body>
<ul id="messages"></ul>
<form id="chat-form" action="">
<input id="chat-input" autocomplete="off" /><button>Send</button>
</form>
<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function () {
const socket = io();
// 监听服务器发送的消息
socket.on('chat message', function(msg) {
$('#messages').append($('<li>').text(msg));
});
// 监听表单提交事件
$('form').submit(function(e) {
e.preventDefault(); // 阻止表单默认提交行为
const message = $('#chat-input').val(); // 获取输入框中的消息
socket.emit('chat message', message); // 将消息发送给服务器
$('#chat-input').val(''); // 清空输入框
return false;
});
});
</script>
</body>
</html>
```
最后,在命令行中运行以下命令启动服务器:
```
node server.js
```
现在,你可以打开两个浏览器窗口并访问 `http://localhost:3000`,然后你可以在两个窗口之间进行实时聊天了。
这就是一个使用 Node.js 和 Socket.io 创建的简单聊天室的实现过程。希望对你有所帮助!