在线聊天室
阅读 (268370)
分享
一、前端JavaScript编写
-
在前端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()
需要
登录
才可以提问哦
: