代码示例：
<!DOCTYPE html>
<html>
<head>
<title>HTML5 WebSocket
<script>
// 创建WebSocket对象，连接到服务器端的WebSocket
var socket = new WebSocket("ws://localhost:8080");
// 监听连接打开事件
socket.onopen = function(event) {
// 在网页上显示连接成功信息
document.getElementById("result").innerHTML = "连接已打开";
};
// 监听接收到消息事件
socket.onmessage = function(event) {
// 在网页上显示来自服务器的消息
document.getElementById("result").innerHTML = event.data;
};
// 监听连接关闭事件
socket.onclose = function(event) {
// 在网页上显示连接关闭信息
document.getElementById("result").innerHTML = "连接已关闭";
};
// 监听连接错误事件
socket.onerror = function(event) {
// 在网页上显示连接错误信息
document.getElementById("result").innerHTML = "连接错误";
};
// 向服务器发送消息
function sendMessage() {
var message = document.getElementById("message").value;
socket.send(message);
}
HTML5 WebSocket
在这个示例中，我们展示了如何使用HTML5 WebSocket来实现实时双向通信。WebSocket提供了一种持久的连接，可以在客户端和服务器之间实时地传输数据。
在代码中，我们首先创建了一个WebSocket对象，并指定了连接到服务器端的WebSocket地址（ws://localhost:8080）。然后，我们通过监听WebSocket对象的事件来处理连接的打开、接收到消息、连接的关闭以及连接的错误。
当连接打开时，我们可以在网页上显示连接成功的信息。当接收到消息时，我们可以在网页上显示来自服务器的消息。当连接关闭时，我们可以在网页上显示连接关闭的信息。当连接发生错误时，我们可以在网页上显示相应的错误信息。
同时，我们还提供了一个输入框和发送按钮，用于向服务器发送消息。通过调用socket.send()方法，我们可以将输入框中的消息发送给服务器。
通过使用HTML5 WebSocket，我们可以实现实时的双向通信，例如实时聊天、实时协作等。WebSocket相比传统的HTTP请求更加高效和实时，能够提供更好的用户体验。
微信扫一扫打赏
支付宝扫一扫打赏
发表评论
评论列表(0)