HTML5 WebSocket 实时双向通信的强大工具(十九)

zhezhongyun 2025-01-14 19:05 69 浏览

代码示例：

```html

<!DOCTYPE html>
<html>
<head>
<title>HTML5 WebSocket</title>
<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);
}
</script>
</head>
<body>
<h1>HTML5 WebSocket</h1>
<p id="result"></p>
<input type="text" id="message" placeholder="输入消息">
<button onclick="sendMessage()">发送消息</button>
</body>
</html>

```

在这个示例中，我们展示了如何使用HTML5 WebSocket来实现实时双向通信。WebSocket提供了一种持久的连接，可以在客户端和服务器之间实时地传输数据。

在代码中，我们首先创建了一个WebSocket对象，并指定了连接到服务器端的WebSocket地址（ws://localhost:8080）。然后，我们通过监听WebSocket对象的事件来处理连接的打开、接收到消息、连接的关闭以及连接的错误。

当连接打开时，我们可以在网页上显示连接成功的信息。当接收到消息时，我们可以在网页上显示来自服务器的消息。当连接关闭时，我们可以在网页上显示连接关闭的信息。当连接发生错误时，我们可以在网页上显示相应的错误信息。

同时，我们还提供了一个输入框和发送按钮，用于向服务器发送消息。通过调用socket.send()方法，我们可以将输入框中的消息发送给服务器。

通过使用HTML5 WebSocket，我们可以实现实时的双向通信，例如实时聊天、实时协作等。WebSocket相比传统的HTTP请求更加高效和实时，能够提供更好的用户体验。

我是永不低头的熊，喜欢美食、健身，当然也喜欢写代码，每天不定时更新各类编程相关的文章，希望你在码农这条路上不再孤单！

HTML5 WebSocket

上一篇：浅析websocket和http的区别
下一篇：WebSocket

HTML5 WebSocket 实时双向通信的强大工具(十九)

相关推荐

前端Flex布局可视化布局工具介绍，vue和html5快速设计利器

HTML 简介（html简介及优缺点）

现在页面实时聊天都使用Websocket技术实现吗?

关于HTML5被简称做H5，你怎么看?（html5缩写）

在SpringBoot+Vue3项目中通过Nginx代理WebSocket实现跨域通信

利用webSocket实现消息的实时推送

谈谈websocket跨域

前端开发规范(一、HTML篇)

html5 工业web组态-开发自定义的组件 (炫酷按钮)

Python每日一库之Beautiful Soup（python mtime）