Tornado实现了对socket的封装：tornado.web.RequestHandler
工程目录：
1、主程序 manage.py
import tornado.web
import tornado.httpserver
from tornado.options import define, options, parse_command_line from chat.views import IndexHandler, LoginHandler, ChatHandler
from util.settings import TEMPLATE_PATH, STATIC_PATH define("port", default=8180, help='run on the port', type=int) def make_app():
return tornado.web.Application(handlers=[
(r'/', IndexHandler),
(r'/login', LoginHandler),
(r'/chat', ChatHandler),
],
pycket={
'engine': 'redis',
'storage': {
'host': 'fot.redis.cache.net',
'port': 6379,
'password': 'yKigE3ZF0mGBSP4/M=',
'db_sessions': 5,
'db_notifications': 11,
'max_connections': 2 ** 31,
},
'cookies': {
'expires_days': 30,
'max_age': 100
},
},
login_url='/login',
template_path=TEMPLATE_PATH,
static_path=STATIC_PATH,
debug=True,
cookie_secret='cqVJzSSjQgWzKtpHMd4NaSeEa6yTy0qRicyeUDIMSjo='
) if __name__ == '__main__':
tornado.options.parse_command_line()
app = make_app()
http_server = tornado.httpserver.HTTPServer(app)
http_server.listen(options.port)
tornado.ioloop.IOLoop.current().start()
2、配置 settings.py
import os BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__))) TEMPLATE_PATH = os.path.join(BASE_DIR, 'templates') STATIC_PATH = os.path.join(BASE_DIR, 'static')
3、聊天程序 views.py
# -*- coding: utf-8 -*-
import datetime
import json import tornado.web
import tornado.websocket
from tornado.web import authenticated # 导入装饰器
from pycket.session import SessionMixin # 设置BaseHandler类，重写函数get_current_user
class BaseHandler(tornado.web.RequestHandler, SessionMixin):
def get_current_user(self): # 前面有绿色小圆圈带个o，再加一个箭头表示重写
current_user = self.session.get('user') # 获取加密的cookie
if current_user:
return current_user
return None # 基类
class BaseWebSocketHandler(tornado.websocket.WebSocketHandler, SessionMixin):
def get_current_user(self):
current_user = self.session.get('user') if current_user:
return current_user
return None # 跳转
class IndexHandler(BaseHandler):
@authenticated # 内置装饰器,检查是否登录
def get(self):
self.render('chat.html') class LoginHandler(BaseHandler):
def get(self):
self.render('index.html') # 跳转页面带上获取的参数 def post(self, *args, **kwargs):
user = self.get_argument('nickname', '')
if user: self.session.set('user', user) # 设置加密cookie
self.redirect('/') # 跳转到之前的路由
else:
self.render('index.html') class ChatHandler(BaseWebSocketHandler):
# 定义接收/发送聊天消息的视图处理类，继承自websocket的WebSocketHandler
# 定义一个集合，用来保存在线的所有用户 online_users = set() # 从客户端获取cookie信息 # 重写open方法，当有新的聊天用户进入的时候自动触发该函数
def open(self): # 新用户上线,加入集合
self.online_users.add(self)
# 将新用户加入的信息发送给所有用户 for user in self.online_users:
user.write_message('[%s]join room' % self.current_user) # 重写on_message方法，当聊天消息有更新时自动触发的函数
def on_message(self, message):
msgobj = {'msg': message} for user in self.online_users:
msgobj['key'] = '%s-%s-sea: ' % (self.current_user, datetime.datetime.now().strftime('%Y-%m-%d %H:%M:%S'))
user.write_message(json.dumps(msgobj)) # 重写on_close方法，当有用户离开时自动触发的函数
def on_close(self):
# 移除用户
self.online_users.remove(self)
for user in self.online_users:
user.write_message('[%s]remove room' % self.current_user) # 重写check_origin方法, 解决WebSocket的跨域请求
def check_origin(self, origin):
return True
4、前端登录 index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>聊天室登录首页</title>
<script src="../static/jquery-3.4.1.js"></script>
</head>
<body>
<div>
<div style="width:60%;">
<div>
聊天室个人登录
</div>
<div>
<form method="post" action="/login" style="width:80%">
<p>昵称:<input type="text" placeholder="请输入昵称" name="nickname"></p>
<button type="submit">登录</button>
</form>
</div>
</div>
</div>
</body>
</html>
5、前端聊天室 chat.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> WebSocket </title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 800px;
margin-left: auto;
margin-right: auto;
margin-top: 25px;
}
#text{
width: 685px;
height: 130px;
border: 1px solid skyblue;
border-radius: 10px;
font-size: 20px;
text-indent: 1em;
resize:none;
outline: none;
}
#text::placeholder{
color: skyblue;
}
.btn{
width: 100px;
margin: -27px 0 0px 8px;
}
#messages{
padding-left: 10px;
font-size: 25px;
}
#messages li{
list-style: none;
color: #000;
line-height: 30px;
font-size: 18px; }
</style>
</head>
<body>
<div class="box">
<div>
<textarea id="text" placeholder="请输入您的内容"></textarea>
<a href="javascript:WebSocketSend();" class="btn btn-primary">发送</a>
</div>
<ul id="messages">
</ul>
</div>
<script src="../static/jquery-3.4.1.js"></script>
<script type="text/javascript">
var mes = document.getElementById('messages');
var wsUrl = "ws://"+ window.location.host +"/chat";
var Socket = ''; if('WebSocket' in window){ /*判断浏览器是否支持WebSocket接口*/
/*创建创建 WebSocket 对象，协议本身使用新的ws://URL格式*/ createWebSocket();
}else{
/*浏览器不支持 WebSocket*/
alert("您的浏览器不支持 WebSocket!");
} function createWebSocket() {
try {
Socket = new WebSocket(wsUrl); init();
} catch(e) {
console.log('catch');
reconnect(wsUrl); //调用心跳
}
} function init() {
/*连接建立时触发*/
Socket.onopen = function () {
alert("连接已建立，可以进行通信"); heartCheck.start(); //调用心跳
};
/*客户端接收服务端数据时触发*/
Socket.onmessage = function (ev) {
var received_msg = ev.data; /*接受消息*/
var jopmsg = '';
try {
received_msg = JSON.parse(received_msg);
console.log(received_msg['msg']); if(received_msg['msg'] == '121')
jopmsg = '121'; received_msg = received_msg['key'] + received_msg['msg'];
}catch (e) { } //发送信息为121时为心跳,不记录到页面(只是个约定)
if(jopmsg !== '121'){
var aLi = "<li>" + received_msg + "</li>";
mes.innerHTML += aLi;
} heartCheck.start(); //调用心跳
};
/*连接关闭时触发*/
Socket.onclose = function () {
mes.innerHTML += "<br>连接已经关闭..."; reconnect(wsUrl); //关闭连接重新连接
};
} function WebSocketSend() {
/*form 里的Dom元素(input select checkbox textarea radio)都是value*/
var send_msg = document.getElementById('text').value;
//或者JQ中获取
// var send_msg = $("#text").val();
/*使用连接发送消息*/
Socket.send(send_msg);
$("#text").val('');
} var lockReconnect = false;//避免重复连接
function reconnect(url) {
if(lockReconnect) {
return true;
}; lockReconnect = true;
//没连接上会一直重连，设置延迟避免请求过多
setTimeout(function () {
createWebSocket(url);
lockReconnect = false;
}, 5000); } //心跳检测
var heartCheck = {
timeout: 10000, //每隔三秒发送心跳
num: 3, //3次心跳均未响应重连
timeoutObj: null,
serverTimeoutObj: null,
start: function(){
var _this = this;
var _num = this.num;
this.timeoutObj && clearTimeout(this.timeoutObj);
this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj);
this.timeoutObj = setTimeout(function(){
//这里发送一个心跳，后端收到后，返回一个心跳消息，
//onmessage拿到返回的心跳就说明连接正常
Socket.send("121"); // 心跳包
_num--;
//计算答复的超时次数
if(_num === 0) {
Socket.colse();
}
}, this.timeout)
}
} </script>
</body>
</html>
6、运行效果: 输入 http://127.0.0.1:8180
7、部署到线上参考：https://www.cnblogs.com/cj8988/p/11288892.html
注 ：nginx需要添加一个配置 （在 server {} 里添加下面配置）
location /chat {
proxy_pass http://tornados;
proxy_http_version 1.1;
proxy_connect_timeout 4s; #配置点1
proxy_read_timeout 120s; #配置点2，如果没效，可以考虑这个时间配置长一点
proxy_send_timeout 120s;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
8、注意,由于nginx超时问题，过段时间websocket会自动断开，所有前端需要设置心跳。
前端 chat.html 中 ：
//心跳检测
var heartCheck = {
timeout: 10000, //每隔三秒发送心跳
num: 3, //3次心跳均未响应重连
timeoutObj: null,
serverTimeoutObj: null,
start: function(){
var _this = this;
var _num = this.num;
this.timeoutObj && clearTimeout(this.timeoutObj);
this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj);
this.timeoutObj = setTimeout(function(){
//这里发送一个心跳，后端收到后，返回一个心跳消息，
//onmessage拿到返回的心跳就说明连接正常
Socket.send("121"); // 心跳包
_num--;
//计算答复的超时次数
if(_num === 0) {
Socket.colse();
}
}, this.timeout)
}
}
在需要的地方调用：
heartCheck.start(); 参考文档：
https://www.jianshu.com/p/93b1788f055c
https://www.lishuaishuai.com/html/759.html https://www.cnblogs.com/cj8988/p/11288892.html
