基于Tornado的WebSocket聊天室

2019-07-08 10:50:21阅读 177评论 0

Tornado自带websocket服务功能,基于tornado.websocket包

1.urls.py

    urls=[  
        url(r'/chat',views.chat),  
        url(r'/chathandler',views.chathander),  
    ]

2.vies.py

    from tornado.web import RequestHandler  
    from tornado.websocket import WebSocketHandler  

    class chat(RequestHander):#前端页面  
        def get(self,*args,**kwargs):  
            self.render('chat.html')  

    class chathander(WebSocketHandler):#提供websocket服务  
        users=[]  
        def open(self):#客户端建立连接是执行此方法  
            print(dir(self))  
            for user in self.users:   
                user.write_message("%s上线了"%self.request.remote_ip)  
            self.users.append(self)  
        def on_message(self,msg):#客户端向服务端发送信息时执行此方法  
            for user in self.users:  
                user.write_message("%s说:%s"%(self.request.remote_ip,msg))  
        def on_close(self):#客户端关闭时执行此方法  
            self.users.remove(self)  
            for user in self.users:  
                user.write_message("%下线了"%self.request.remote_ip)  
        def check_origin(self,origin):#客户端支持异域  
            return True

3.chat.html

    <!DOCTYPE html>  
    <html lang="en">  
    <head>  
        <meta charset="UTF-8">  
        <title>Document</title>  
        <link rel="stylesheet" href="/static/css/bootstrap.css">  
        <script src="{{static_url('js/jquery-3.3.1.min.js')}}"></script>  
        <script src="{{static_url('js/bootstrap.min.js')}}"></script>  
    </head>  
    <body>  

        <div class="container">  
            <div class="card" style="height: 45rem">  
              <div class="card-body" id="content">  
                <h5 class="card-title">聊天</h5>  
                <hr/>  
                <p></p>  
              </div>  
            </div>  
            <textarea  class="form-control" name="" id="msg" ></textarea>  
            <p class='text-right'><button id="send" class="btn btn-success">发送</button></p>  
        </div></body>  
    <script>  

    $(function(){  
        var ws=new WebSocket("ws://127.0.0.1:8080/chathandler")//与服务端建立连接  
        ws.onmessage=function(data){//收到服务端发送的信息时调用此方法  
            $('#content').append('<p>'+data.data+'</p>')  
            $('#msg').val('')  
        }     

        $('#send').click(function(){  
            var msg=$('#msg').val()  
            if(msg){  
                ws.send(msg)//向服务端发送信息  
            }  
        })  

    })  
    </script>  
    </html>

页面效果:

还没有评论,来说两句吧