代码改变世界

基于websocket的简易聊天室

2019-08-22 09:07  美丽的名字  阅读(114)  评论(0)    收藏  举报

服务端：

#!usr/bin/env python  
#-*- coding:utf-8 _*-  



import tornado.web
import tornado.websocket
import tornado.ioloop
import tornado.autoreload

class IndexHandler(tornado.web.RequestHandler):
    def get(self, *args, **kwargs):
        self.render('index.html')


users = set()
class ChatHandler(tornado.websocket.WebSocketHandler):
    def open(self, *args: str, **kwargs: str):
        users.add(self)


    def on_message(self, message):
        print(message)
        content = self.render_string('message.html', msg=message)
        for user in users:
            user.write_message(content)


def run():
    settings = {
        'template_path': '../templates',
        'static_path': '../static',
        'debug': True,
    }

    application = tornado.web.Application([
        (r"/", IndexHandler),
        (r"/chat", ChatHandler),
    ], **settings)
    application.listen(8000)
    instance = tornado.ioloop.IOLoop.instance()
    tornado.autoreload.start(instance)
    instance.start()

if __name__ == '__main__':
    run()

web端：

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>chatroom</title>
    <style>
        .container{
            border: 2px solid #dddddd;
            height: 400px;
            overflow: auto;
        }
    </style>
</head>
<body>
    <div style="width: 750px;margin: 0 auto;">
        <h1>chatroom</h1>
        <div class="container"></div>
        <div class="input">
            <input type="text" id="txt">
            <input type="button" value="发送" id="btn" onclick="sendMessage();">
        </div>
    </div>


    <script src="../static/jquery-3.4.1.js"></script>
    <script>
        ws = new WebSocket('ws://127.0.0.1:8000/chat');
        function sendMessage() {
            ws.send($('#txt').val());
        }
        ws.onmessage = function (event) {
            $('.container').append(event.data);
        }
    </script>
</body>
</html>

message.html

<div style="margin: 20px; background-color: cyan">{{msg}}</div>