html聊天室源码
时间: 2023-08-20 22:06:04 浏览: 53
以下是一个简单的 HTML 聊天室的源代码,它使用了 WebSocket 技术来实现实时通讯:
HTML 代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>WebSocket Chat Room</title>
<meta charset="UTF-8">
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
#chatbox {
height: 400px;
overflow: auto;
padding: 10px;
background-color: #f2f2f2;
}
#input-box {
padding: 10px;
background-color: #f2f2f2;
}
</style>
</head>
<body>
<div id="chatbox"></div>
<div id="input-box">
<input type="text" id="message" placeholder="Type your message...">
<button id="send">Send</button>
</div>
<script>
var chatbox = document.getElementById('chatbox');
var messageInput = document.getElementById('message');
var sendButton = document.getElementById('send');
// 创建 WebSocket 连接
var ws = new WebSocket('ws://localhost:8080');
// 发送消息
function sendMessage() {
var message = messageInput.value;
if (message.trim() !== '') {
ws.send(message);
messageInput.value = '';
}
}
// 显示消息
function showMessage(message) {
var div = document.createElement('div');
div.innerHTML = message;
chatbox.appendChild(div);
chatbox.scrollTop = chatbox.scrollHeight; // 滚动到底部
}
// 接收消息
ws.onmessage = function(event) {
showMessage(event.data);
};
// 处理发送按钮点击事件
sendButton.addEventListener('click', function() {
sendMessage();
});
// 处理回车键按下事件
messageInput.addEventListener('keydown', function(event) {
if (event.keyCode === 13) {
sendMessage();
}
});
</script>
</body>
</html>
```
JavaScript 代码:
```javascript
// 创建 WebSocket 服务器
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });
// 处理连接事件
wss.on('connection', function(ws) {
// 处理消息事件
ws.on('message', function(message) {
// 广播消息给所有连接的客户端
wss.clients.forEach(function(client) {
if (client.readyState === WebSocket.OPEN) {
client.send(message);
}
});
});
});
```
这个聊天室非常简单,只能在本地使用。如果要发布到互联网上,需要将 WebSocket 服务器部署到云服务器上,并将 HTML 中的 `ws://localhost:8080` 修改为服务器的地址。同时需要注意安全性问题,防止恶意用户利用聊天室进行攻击。