|
发表于 2023-3-12 22:12:58
高大上手机用户
|
显示全部楼层
浙江省杭州市
以下是一个使用HTML和JavaScript的WebSocket示例代码,可用于发送和接收文本消息并弹出数据:
html
Copy code
<!DOCTYPE html>
<html>
<head>
<title>WebSocket示例</title>
</head>
<body>
<h1>WebSocket示例</h1>
<label for="message">消息:</label>
<input type="text" id="message" />
<button onclick="sendMessage()">发送</button>
<script>
// 创建WebSocket对象
const socket = new WebSocket('wss://example.com');
// 当WebSocket打开时执行
socket.addEventListener('open', function (event) {
console.log('WebSocket已连接');
});
// 当WebSocket接收到数据时执行
socket.addEventListener('message', function (event) {
console.log('WebSocket收到数据:', event.data);
// 弹出接收到的数据
alert(event.data);
});
// 当WebSocket关闭时执行
socket.addEventListener('close', function (event) {
console.log('WebSocket已关闭');
});
// 当WebSocket发生错误时执行
socket.addEventListener('error', function (event) {
console.error('WebSocket错误:', event);
});
// 发送消息到WebSocket服务器
function sendMessage() {
const messageInput = document.getElementById('message');
const message = messageInput.value;
socket.send(message);
messageInput.value = '';
}
</script>
</body>
</html>
在这个示例中,我们创建了一个包含文本框和发送按钮的HTML页面。当用户点击发送按钮时,我们将文本框中的文本发送到WebSocket服务器。当WebSocket收到消息时,它会触发message事件,并将收到的数据作为事件的data属性传递。我们在message事件处理程序中使用alert来弹出接收到的数据。此外,我们还可以处理open,close和error事件,以便在连接状态发生变化时执行一些操作。
请注意,这个示例中的WebSocket连接是通过wss协yi进行加密的,如果您使用的是自己的WebSocket服务器,您可能需要根据实际情况进行修改。 |
|