首页用javascript和html写一个建立websocket连接

用javascript和html写一个建立websocket连接

时间: 2024-05-06 07:18:30 浏览: 13

好的，下面是一个简单的示例代码： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>WebSocket Demo</title> </head> <body> <input type="text" id="message"> <button onclick="sendMessage()">Send</button> <br><br> <div id="output"></div> <script> // 建立 WebSocket 连接 const socket = new WebSocket('ws://localhost:8080'); // 监听连接事件 socket.addEventListener('open', function (event) { console.log('WebSocket connected'); }); // 监听消息事件 socket.addEventListener('message', function (event) { console.log('Message from server:', event.data); const output = document.getElementById('output'); output.innerHTML += '<p>' + event.data + '</p>'; }); // 发送消息 function sendMessage() { const message = document.getElementById('message').value; socket.send(message); } </script> </body> </html> ``` 在这个示例中，我们首先通过 `new WebSocket('ws://localhost:8080')` 创建了一个 WebSocket 连接，并监听了连接事件和消息事件。当连接成功建立时，控制台会输出 "WebSocket connected"。当收到来自服务器的消息时，我们会将其显示在页面上。另外，我们还提供了一个输入框和发送按钮，允许用户向服务器发送消息。当用户点击发送按钮时，我们会获取输入框中的内容，并通过 `socket.send()` 方法发送给服务器。请注意，这只是一个基础示例，实际应用中需要根据具体需求进行修改和扩展。