二手网站聊天功能代码实现
时间: 2023-07-30 12:10:37 浏览: 48
实现二手网站的聊天功能,需要以下步骤:
1. 创建数据库表
需要在数据库中创建一张表来存储聊天记录。表中需要包含以下字段:发送者ID、接收者ID、消息内容、发送时间、是否已读等信息。
2. 编写后端API
编写后端API来处理前端发送的消息请求,将消息保存到数据库中,并返回给前端相应的数据。
例如,可以使用Node.js和Express框架来编写后端API,代码如下:
```javascript
const express = require('express');
const bodyParser = require('body-parser');
const mysql = require('mysql');
const app = express();
app.use(bodyParser.json());
const connection = mysql.createConnection({
host: 'localhost',
user: 'root',
password: 'password',
database: 'chat'
});
connection.connect((err) => {
if (err) throw err;
console.log('Connected to database');
});
app.post('/sendMessage', (req, res) => {
const { senderId, receiverId, message } = req.body;
const date = new Date().toISOString().slice(0, 19).replace('T', ' ');
const sql = `INSERT INTO messages (sender_id, receiver_id, message, sent_time, is_read) VALUES (${senderId}, ${receiverId}, "${message}", "${date}", 0)`;
connection.query(sql, (err, result) => {
if (err) throw err;
console.log('New message inserted');
res.send({ success: true });
});
});
app.listen(3000, () => console.log('Server started on port 3000'));
```
3. 编写前端页面
在前端页面中,需要添加聊天窗口,输入框和发送按钮等组件。当用户点击发送按钮时,需要将消息发送到后端API,并将消息显示在聊天窗口中。
例如,可以使用React框架来编写前端页面,代码如下:
```javascript
import React, { useState, useEffect } from 'react';
import axios from 'axios';
const Chat = ({ senderId, receiverId }) => {
const [messages, setMessages] = useState([]);
const [newMessage, setNewMessage] = useState('');
const fetchMessages = async () => {
const { data } = await axios.get(`/getMessages?senderId=${senderId}&receiverId=${receiverId}`);
setMessages(data);
};
useEffect(() => {
fetchMessages();
}, []);
const sendMessage = async () => {
await axios.post('/sendMessage', { senderId, receiverId, message: newMessage });
setMessages([...messages, { sender_id: senderId, receiver_id: receiverId, message: newMessage, sent_time: new Date().toISOString().slice(0, 19).replace('T', ' '), is_read: 0 }]);
setNewMessage('');
};
return (
<div>
<div>
{messages.map((message, index) => (
<div key={index}>
{message.sender_id === senderId ? 'You: ' : ''}
{message.message}
</div>
))}
</div>
<div>
<input type="text" value={newMessage} onChange={(e) => setNewMessage(e.target.value)} />
<button onClick={sendMessage}>Send</button>
</div>
</div>
);
};
export default Chat;
```
以上代码仅供参考,具体实现方式需要根据实际需求进行调整。