编写一个使用webSocket可进行前后端交互的项目
时间: 2024-05-14 15:12:41 浏览: 18
以下是一个使用WebSockets进行前后端交互的简单聊天室项目的示例:
前端:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>WebSocket Chat</title>
<script>
var socket = new WebSocket("ws://localhost:8080");
socket.onmessage = function(event) {
var messages = document.getElementById("messages");
var message = document.createElement("li");
message.innerHTML = event.data;
messages.appendChild(message);
};
function sendMessage() {
var input = document.getElementById("messageInput");
var message = input.value;
socket.send(message);
input.value = "";
}
</script>
</head>
<body>
<ul id="messages"></ul>
<input type="text" id="messageInput" />
<button onclick="sendMessage()">Send</button>
</body>
</html>
```
后端:
```javascript
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 !== ws && client.readyState === WebSocket.OPEN) {
client.send(message);
}
});
});
});
```
此聊天室项目使用WebSocket建立了一个服务器和客户端之间的双向通信通道。当一个客户端发送一条消息时,服务器将该消息广播给所有其他连接的客户端。在前端,我们使用WebSocket对象创建一个WebSocket实例,并在收到消息时向页面添加一个新的列表项。在后端,我们使用WebSocket.Server创建一个WebSocket服务器,并在连接时监听每个WebSocket实例的消息事件。当服务器接收到一条消息时,它将该消息广播给所有其他连接的客户端。