用Toanado实现的简易聊天室

最新推荐文章于 2023-12-06 08:57:32 发布

月守护

最新推荐文章于 2023-12-06 08:57:32 发布

阅读量177

点赞数 1

分类专栏： Tornado 文章标签： Tornado 聊天室 websocket

本文链接：https://blog.csdn.net/csdniter/article/details/98505391

版权

Tornado 专栏收录该内容

5 篇文章

订阅专栏

app.py 程序执行的入口

#!/usr/bin/env python
# -*- coding:utf-8 -*-
import uuid
import json
import tornado.ioloop
import tornado.web
import tornado.websocket


class IndexHandler(tornado.web.RequestHandler):
    '''http请求'''
    def get(self):
        self.render('index.html')


class ChatHandler(tornado.websocket.WebSocketHandler):
    '''websocket请求'''
    # 用户存储当前聊天室用户
    waiters = set()
    # 用于存储历时消息
    messages = []

    def open(self):
        """
        客户端连接成功时，自动执行
        :return: 
        """
        ChatHandler.waiters.add(self)
        uid = str(uuid.uuid4())
        self.write_message(uid)


        for msg in ChatHandler.messages:
            print(msg)
            content = self.render_string('message.html', **msg)   #只渲染，不发送
            self.write_message(content)                       #发送

    def on_message(self, message):
        """
        客户端连发送消息时，自动执行
        :param message: 
        :return: 
        """
        msg = json.loads(message)

        ChatHandler.messages.append(message)

        for client in ChatHandler.waiters:
            content = client.render_string('message.html', **msg)
            print(content)
            client.write_message(content)
        ChatHandler.messages.clear()

    def on_close(self):
        """
        客户端关闭连接时，，自动执行
        :return: 
        """
        pass
        ChatHandler.waiters.remove(self)


def run():
    settings = {
        'template_path': 'templates',
        'static_path': 'static',
    }
    application = tornado.web.Application([
        (r"/", IndexHandler),
        (r"/chat", ChatHandler),
    ], **settings)
    application.listen(8888)
    tornado.ioloop.IOLoop.instance().start()


if __name__ == "__main__":
    run()

index.html 聊天室页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Python聊天室</title>
</head>
<body>
    <div>
        <input type="text" id="txt"/>
        <input type="button" id="btn" value="提交" onclick="sendMsg();"/>
        <input type="button" id="close" value="关闭连接" onclick="closeConn();"/>

    </div>
    <div id="container" style="border: 1px solid #dddddd;margin: 20px;min-height: 500px;">

    </div>

    <script src="/static/jquery-3.3.1/jquery-3.3.1.js"></script>
    <script type="text/javascript">
        $(function () {
            wsUpdater.start();
        });

        var wsUpdater = {
            socket: null,
            uid: null,
            start: function() {
                var url = "ws://127.0.0.1:8888/chat";
                wsUpdater.socket = new WebSocket(url);                 //建立连接


                wsUpdater.socket.onmessage = function(event) {        //接收服务器数据
                    console.log(event);
                    if(wsUpdater.uid){
                        wsUpdater.showMessage(event.data);
                    }else{
                        wsUpdater.uid = event.data;
                    }
                }
            },
            showMessage: function(content) {                 //展示消息
                $('#container').append(content);
            }
        };

        function sendMsg() {                                 //发送消息
            var msg = {
                uid: wsUpdater.uid,
                message: $("#txt").val()
            };
            wsUpdater.socket.send(JSON.stringify(msg));
        }

</script>

</body>
</html>

message.html 消息渲染页面

<div style="border: 1px solid #dddddd;margin: 10px;">
    <div>游客{{uid}}</div>
    <div style="margin-left: 20px;">{{message}}</div>
</div>

还需要jQury，以上就是全部了