前端 socket通信交互界面
时间: 2023-09-09 08:06:03 浏览: 42
前端可以使用 WebSocket 进行实时通信。在 HTML5 中,新增了 WebSocket API,使得前端可以更加简单地与服务器进行实时通信。下面是一个简单的前端 WebSocket 通信交互界面的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>WebSocket Demo</title>
<script>
var socket = new WebSocket("ws://127.0.0.1:8080"); // 连接 WebSocket 服务器
socket.onopen = function() {
console.log("连接已打开");
};
socket.onmessage = function(event) {
console.log("收到消息:" + event.data);
};
socket.onclose = function() {
console.log("连接已关闭");
};
function sendMessage() {
var message = document.getElementById("message").value;
socket.send(message); // 发送消息到 WebSocket 服务器
}
</script>
</head>
<body>
<input type="text" id="message">
<button onclick="sendMessage()">发送消息</button>
</body>
</html>
```
在上述代码中,我们定义了一个 WebSocket 对象 `socket`,并使用 `new WebSocket()` 方法连接到指定的 WebSocket 服务器。在连接成功后,我们监听 `onopen` 事件,当连接打开时,在控制台输出一条消息。同时,我们也监听 `onmessage` 事件,当收到服务器发送的消息时,在控制台输出一条消息。当连接关闭时,我们监听 `onclose` 事件,在控制台输出一条消息。
在 HTML 中,我们定义了一个文本输入框和一个按钮,当用户输入消息并点击按钮时,调用 `sendMessage()` 函数,将消息发送到 WebSocket 服务器。