写个实例,使用websocket实现聊天室功能
时间: 2024-05-25 16:05:56 浏览: 73
以下是一个使用WebSocket实现聊天室功能的简单示例:
HTML文件:
```html
<!DOCTYPE html>
<html>
<head>
<title>WebSocket Chat</title>
<meta charset="UTF-8">
<style>
body {
font-family: Arial, sans-serif;
font-size: 14px;
}
#messages {
height: 200px;
border: 1px solid #ccc;
overflow-y: scroll;
padding: 5px;
}
</style>
</head>
<body>
<h1>WebSocket Chat</h1>
<div id="messages"></div>
<form id="form">
<input type="text" id="username" placeholder="Your name">
<input type="text" id="message" placeholder="Type your message">
<button type="submit">Send</button>
</form>
<script>
var ws = new WebSocket("ws://localhost:8080/chat");
ws.onmessage = function(event) {
var data = JSON.parse(event.data);
var messages = document.getElementById("messages");
var message = document.createElement("div");
message.innerHTML = "<strong>" + data.username + ":</strong> " + data.message;
messages.appendChild(message);
};
document.getElementById("form").addEventListener("submit", function(event) {
event.preventDefault();
var username = document.getElementById("username").value;
var message = document.getElementById("message").value;
var data = {
username: username,
message: message
};
ws.send(JSON.stringify(data));
document.getElementById("message").value = "";
});
</script>
</body>
</html>
```
JavaScript文件:
```javascript
var WebSocketServer = require("ws").Server;
var wss = new WebSocketServer({ port: 8080 });
wss.on("connection", function(ws) {
ws.on("message", function(data) {
var message = JSON.parse(data);
wss.clients.forEach(function(client) {
client.send(JSON.stringify(message));
});
});
});
```
这个简单的聊天室允许用户输入用户名和消息,并将其发送到服务器。服务器将消息广播到所有连接的客户端。客户端收到消息后,将其显示在消息框中。