用js代码完成一个前端聊天功能
时间: 2024-05-15 18:18:17 浏览: 9
好的,我可以为您提供一些代码示例,以实现基本的前端聊天功能:
HTML 代码:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>聊天室</title>
</head>
<body>
<div id="chat-container">
<div id="messages"></div>
<form id="message-form" action="#" method="post">
<input type="text" name="message" placeholder="输入消息...">
<button type="submit">发送</button>
</form>
</div>
</body>
</html>
```
JavaScript 代码:
```
const socket = io(); // 可使用 socket.io 库实现实时通信
const messageForm = document.getElementById('message-form');
const messageInput = messageForm.querySelector('input');
const messages = document.getElementById('messages');
function appendMessage(message) { // 添加消息
const messageElement = document.createElement('div');
messageElement.innerText = message;
messages.appendChild(messageElement);
}
messageForm.addEventListener('submit', (event) => { // 发送消息
event.preventDefault();
const message = messageInput.value;
appendMessage(`你:${message}`);
// 发送消息给服务器
socket.emit('chatMessage', message);
messageInput.value = '';
});
// 监听服务器发送的消息
socket.on('message', (message) => {
appendMessage(`用户:${message}`);
});
```
这段代码使用了 socket.io 库,它可以帮助我们实现实时通信。代码中创建了一个聊天框,当用户输入消息并点击“发送”按钮时,将其添加到聊天框中。同时,发送消息给服务器并监听服务器返回的消息,将其添加到聊天框中。这样就实现了基本的前端聊天功能。