基于Tornado的WebSocket聊天室
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>
页面效果:
还没有评论,来说两句吧
