自学 websocket（五）：实战上手实现服务器向浏览器的通信

本文链接：https://blog.youkuaiyun.com/m0_61560439/article/details/130567983

文章目录

- 实现跟浏览器的websockets通信

实现跟浏览器的websockets通信

老规矩，先摆出代码再解释
只会python不会写html和js也没有关系代码很简洁，重点是理解websockets通信，同时能用python写一个服务器

server 端

import asyncio
import datetime
import random

import websockets


async def show_time(websocket):
    while True:
        message = datetime.datetime.utcnow().isoformat() + "Z"
        await websocket.send(message)
        await asyncio.sleep(random.random() * 2 + 1)  # 生成一个在1到3之间的随机浮点数


async def main():
    async with websockets.serve(show_time, "localhost", 5678):
        print(f"[server on 5678]")
        await asyncio.Future()


if __name__ == '__main__':
    asyncio.run(main())

网页 html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>websocket demo</title>
</head>
<body>
    <script src="show_time.js"></script>
</body>
</html>

javascript

// 当DOM加载完成后执行以下代码
window.addEventListener("DOMContentLoaded", () => {

    const messages = document.createElement("ul");  // 创建一个<ul>元素

    document.body.appendChild(messages);  // 将<ul>元素添加到<body>元素中

    const websocket = new WebSocket("ws://localhost:5678/");  // 创建一个WebSocket对象，连接到本地主机的5678端口

    websocket.onmessage = ({data}) => {  // 当接收到消息时执行以下代码

        const message = document.createElement("li");  // 创建一个<li>元素

        const content = document.createTextNode(data);  // 创建一个文本节点，包含接收到的消息内容

        message.appendChild(content);  // 将文本节点添加到<li>元素中

        messages.appendChild(message);  // 将<li>元素添加到<ul>元素中
    };
});