在线聊天室

660次阅读

共计 2757 个字符，预计需要花费 7 分钟才能阅读完成。

在前端 JS 中使用 WebSocket 与服务器通讯如下

var ws = new WebSocket("ws://127.0.0.1:8000/websocket"); // 新建一个 ws 连接 
ws.onopen = function() {// 连接建立好后的回调 
   ws.send("Hello, world");  // 向建立的连接发送消息 
};
ws.onmessage = function (evt) {// 收到服务器发送的消息后执行的回调 
   alert(evt.data);  // 接收的消息内容在事件参数 evt 的 data 属性中 
};

前端完整代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> 聊天室 </title>
    <style>
        body,ul,li{margin: 0;
            padding: 0;
            list-style: none;
        }
        #box{width:800px;
            margin: auto;
        }

        #con{height: 400px;
            width: 100%;
            background-color: aqua;
            overflow-x: scroll;
            border-radius: 20px;

        }
        .page_con>li{height: 30px;
            text-align: left;
            line-height: 30px;
            margin-left:10px;
            margin-top:10px;
        }
        #send_message{height: 60px;
            width: 99%;
            resize: none;
            margin-top: 10px;
            font-size: 20px;
            border: 1px dotted red;
        }
        button{border: none;
            width: 50px;
            height: 30px;
            float: right;
            border-radius: 10px;
            color:aqua;
        }
    </style>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>

</head>
<body>
<div id="box">
    <div id="top">
        <h1>Lucky 在线聊天室 </h1>
    </div>
    <div id="con">
        <ul class="page_con">

        </ul>
    </div>
    <textarea name="" id="send_message" cols="30" rows="10"></textarea>
    <button type="button" onclick="sendMsg()"> 发送 </button>
</div>

<script type="text/javascript">
        var ws = new WebSocket("ws://127.0.0.1:8000/chat");

        function sendMsg() {var msg = $("#send_message").val();
            ws.send(msg);
            $("#send_message").val("");
        }
        ws.onmessage = function(e) {$(".page_con").append("<li>" + e.data + "</li>");
        }
    </script>
</body>
</html>

server.py

import tornado.web
import tornado.ioloop
import tornado.httpserver
import tornado.options
import os
import datetime

from tornado.web import RequestHandler
from tornado.options import define, options
from tornado.websocket import WebSocketHandler

define("port", default=8000, type=int)

class IndexHandler(RequestHandler):
    def get(self):
        self.render("index.html")

class ChatHandler(WebSocketHandler):

    users = set()  # 用来存放在线用户的容器 

    def open(self):
        self.users.add(self)  # 建立连接后添加用户到容器中 
        for u in self.users:  # 向已在线用户发送消息 
            u.write_message(u"[%s]-[%s]- 进入聊天室" % (self.request.remote_ip, datetime.datetime.now().strftime("%Y-%m-%d %H:%M:%S")))

    def on_message(self, message):
        for u in self.users:  # 向在线用户广播消息 
            u.write_message(u"[%s]-[%s]- 说：%s" % (self.request.remote_ip, datetime.datetime.now().strftime("%Y-%m-%d %H:%M:%S"), message))

    def on_close(self):
        self.users.remove(self) # 用户关闭连接后从容器中移除用户 
        for u in self.users:
            u.write_message(u"[%s]-[%s]- 离开聊天室" % (self.request.remote_ip, datetime.datetime.now().strftime("%Y-%m-%d %H:%M:%S")))

    def check_origin(self, origin):
        return True  # 允许 WebSocket 的跨域请求 

if __name__ == '__main__':
    tornado.options.parse_command_line()
    app = tornado.web.Application([(r"/", IndexHandler),
            (r"/chat", ChatHandler),
        ],
        static_path = os.path.join(os.path.dirname(__file__), "static"),
        template_path = os.path.join(os.path.dirname(__file__), "template"),
        debug = True
        )
    http_server = tornado.httpserver.HTTPServer(app)
    http_server.listen(options.port)
    tornado.ioloop.IOLoop.current().start()