|
|
@ -39,15 +39,15 @@ export default {
|
|
|
|
try {
|
|
|
|
try {
|
|
|
|
await axios.post('http://example.com/messages', {
|
|
|
|
await axios.post('http://example.com/messages', {
|
|
|
|
content: this.newMessage,
|
|
|
|
content: this.newMessage,
|
|
|
|
sender: 'Me', // You can replace 'Me' with the sender's name
|
|
|
|
sender: 'Me', // 可以将“Me”替换为发件人的姓名
|
|
|
|
});
|
|
|
|
});
|
|
|
|
this.newMessage = ''; // Clear the input field after sending
|
|
|
|
this.newMessage = ''; // 发送后清除输入字段
|
|
|
|
// You might want to fetch messages again here to update the UI with the latest messages
|
|
|
|
// 在此处再次获取消息,以使用最新消息更新 UI
|
|
|
|
} catch (error) {
|
|
|
|
} catch (error) {
|
|
|
|
console.error('Error sending message:', error);
|
|
|
|
console.error('Error sending message:', error);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
// WebSocket logic to receive messages
|
|
|
|
// 用于接收消息的 WebSocket 逻辑
|
|
|
|
setupWebSocket() {
|
|
|
|
setupWebSocket() {
|
|
|
|
const ws = new WebSocket('ws://example.com/socket');
|
|
|
|
const ws = new WebSocket('ws://example.com/socket');
|
|
|
|
ws.onmessage = (event) => {
|
|
|
|
ws.onmessage = (event) => {
|
|
|
@ -57,8 +57,8 @@ export default {
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
created() {
|
|
|
|
created() {
|
|
|
|
this.fetchMessages(); // Fetch messages when the component is created
|
|
|
|
this.fetchMessages(); // 创建组件时获取消息
|
|
|
|
this.setupWebSocket(); // Setup WebSocket connection
|
|
|
|
this.setupWebSocket(); // 设置 WebSocket 连接
|
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
</script>
|
|
|
@ -70,7 +70,7 @@ export default {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.chat {
|
|
|
|
.chat {
|
|
|
|
border: 2px solid #ccc;
|
|
|
|
border: 2px solid #28a7a3;
|
|
|
|
border-radius: 10px;
|
|
|
|
border-radius: 10px;
|
|
|
|
padding: 20px;
|
|
|
|
padding: 20px;
|
|
|
|
display: flex;
|
|
|
|
display: flex;
|
|
|
@ -100,7 +100,7 @@ export default {
|
|
|
|
.input input {
|
|
|
|
.input input {
|
|
|
|
flex: 1;
|
|
|
|
flex: 1;
|
|
|
|
padding: 8px;
|
|
|
|
padding: 8px;
|
|
|
|
border: 1px solid #ccc;
|
|
|
|
border: 1px solid #003f3f;
|
|
|
|
border-radius: 5px;
|
|
|
|
border-radius: 5px;
|
|
|
|
font-size: 16px;
|
|
|
|
font-size: 16px;
|
|
|
|
}
|
|
|
|
}
|
|
|
@ -110,7 +110,7 @@ export default {
|
|
|
|
border: none;
|
|
|
|
border: none;
|
|
|
|
border-radius: 5px;
|
|
|
|
border-radius: 5px;
|
|
|
|
background-color: #007bff;
|
|
|
|
background-color: #007bff;
|
|
|
|
color: #fff;
|
|
|
|
color: #a6cfee;
|
|
|
|
font-size: 16px;
|
|
|
|
font-size: 16px;
|
|
|
|
cursor: pointer;
|
|
|
|
cursor: pointer;
|
|
|
|
margin-left: 10px;
|
|
|
|
margin-left: 10px;
|
|
|
|