首页使用websocket写一个前端页面

使用websocket写一个前端页面

时间: 2023-07-25 12:15:35 浏览: 89

好的，下面是一个简单的前端页面使用 WebSocket 进行通信的示例代码： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>WebSocket Demo</title> </head> <body> <h1>WebSocket Demo</h1> <div id="messages"></div> <form id="message-form"> <input type="text" id="message-input"> <button type="submit">Send</button> </form> <script> const messages = document.getElementById('messages'); const messageForm = document.getElementById('message-form'); const messageInput = document.getElementById('message-input'); // 创建 WebSocket 连接 const socket = new WebSocket('ws://localhost:8080'); // 监听连接打开事件 socket.addEventListener('open', (event) => { console.log('WebSocket connected'); }); // 监听消息接收事件 socket.addEventListener('message', (event) => { const message = event.data; messages.innerHTML += `<div>${message}</div>`; }); // 监听连接关闭事件 socket.addEventListener('close', (event) => { console.log('WebSocket disconnected'); }); // 监听表单提交事件 messageForm.addEventListener('submit', (event) => { event.preventDefault(); const message = messageInput.value; socket.send(message); messageInput.value = ''; }); </script> </body> </html> ``` 这个示例页面包含一个表单，用户可以在输入框中输入消息并点击发送按钮发送消息到服务器。服务器端收到消息后会将消息原样返回给客户端，客户端再将消息显示在页面上。页面中通过 WebSocket 对象来创建 WebSocket 连接并监听连接打开、消息接收、连接关闭等事件，同时也监听表单提交事件，将用户输入的消息通过 WebSocket 发送到服务器。具体实现需要在服务器端编写 WebSocket 服务端代码来接收和处理客户端发送的消息。

阅读全文