FastAPI 学习之路（四十五）WebSockets（二）

最新推荐文章于 2025-09-16 13:05:20 发布

原创

最新推荐文章于 2025-09-16 13:05:20 发布 · 855 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#fastapi

上一节，我们分享了WebSockets入门的使用方法，本节，我们在原来的基础上，进行深入的演示。上一节最后我们提到了依赖token或者cookie等。首先我们对上次的代码进行调整。在 FastApi学习之路（三十八）Static Files，我们提到了静态文件的使用，我们按照之前的方法，将上一节中的静态代码抽离出来。

放在了templates下面的webchat.html。

<!DOCTYPE html>

<html>

    <head>

        <title>Chat</title>

    </head>

    <body>

        <h1>WebSocket 聊天</h1>

        <form action="" onsubmit="sendMessage(event)">

            <input type="text" id="messageText" autocomplete="off"/>

            <button>Send</button>

        </form>

        <ul id='messages'>

        </ul>

        <script>

            var ws = new WebSocket("ws://localhost:8000/ws");

            ws.onmessage = function(event) {

                var messages = document.getElementById('messages')