对应写一套连接的前端页面
时间: 2024-03-05 12:48:44 浏览: 21
好的,以下是一个简单的socket.io前端页面的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Socket.IO Demo</title>
<script src="https://cdn.socket.io/socket.io-3.1.1.min.js"></script>
</head>
<body>
<h1>Socket.IO Demo</h1>
<p id="message"></p>
<button id="btn">断开连接</button>
<script>
var socket = io.connect('http://localhost:8000');
// 监听服务端发送的消息
socket.on('hello', function(data) {
document.getElementById('message').innerHTML = data;
});
// 断开连接
document.getElementById('btn').addEventListener('click', function() {
socket.disconnect();
});
</script>
</body>
</html>
```
在上面的示例中,通过`io.connect()`方法连接socket.io服务端,并通过`socket.on()`方法监听服务端发送的消息。当点击"断开连接"按钮时,通过`socket.disconnect()`方法断开与服务端的连接。需要注意的是,`io.connect()`方法的参数应该与服务端的地址对应,`socket.on()`方法的第一个参数应该与服务端发送的消息名字对应。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![](https://img-home.csdnimg.cn/images/20210720083646.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)