html5使用Websocket

作者：System 时间：2024年08月12日分类：所有,html5 字数：1363

在HTML5中，使用WebSocket与服务器进行双向通信非常简单。以下是一个简单的示例，展示了如何在客户端和服务器之间建立WebSocket连接，并发送和接收消息。

客户端代码（HTML + JavaScript）:




<!DOCTYPE html>
<html>
<head>
    <title>WebSocket Example</title>
</head>
<body>
    <script type="text/javascript">
        var ws = new WebSocket("ws://yourserver.com/path"); // 替换为你的服务器地址
 
        ws.onopen = function() {
            console.log("WebSocket connected.");
            ws.send("Hello, Server!"); // 发送消息到服务器
        };
 
        ws.onmessage = function(event) {
            console.log("Message from server: " + event.data); // 打印服务器返回的消息
        };
 
        ws.onclose = function() {
            console.log("WebSocket closed.");
        };
 
        ws.onerror = function(error) {
            console.log("WebSocket error: " + error);
        };
    </script>
</body>
</html>

服务器端代码（以Python的websockets库为例）:




import asyncio
import websockets
 
async def echo(websocket, path):
    async for message in websocket:
        await websocket.send(message) # 将接收到的消息原样发回客户端
 
start_server = websockets.serve(echo, "localhost", 8765)
 
asyncio.get_event_loop().run_until_complete(start_server)
asyncio.get_event_loop().run_forever()

确保替换ws://yourserver.com/path为实际的WebSocket服务器地址，并且服务器端的地址和端口与之匹配。

以上代码创建了一个简单的WebSocket服务器，它会将客户端发送的所有消息原样返回。在实际应用中，你需要根据业务逻辑来处理接收到的消息，并在服务器端做出适当的响应。

html5使用Websocket

评论已关闭

推荐阅读