websocket聊天室demo（tornado+nginx+wss+在线demo）在线demo（已停⽌服务）
前端代码(来源⽹友，⾃⼰稍作修改)：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> WebSocket ChatRoom </title>
<style>
*{
margin: 0;
padding: 0;
}
.
box{
width: 800px;
margin-left: auto;
margin-right: auto;
margin-top: 25px;
}
#text{
width: 685px;
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 type="text/javascript">
var mes = ElementById('messages');
if('WebSocket' in window){  /*判断浏览器是否⽀持WebSocket接⼝*/
/*创建创建 WebSocket 对象，协议本⾝使⽤新的ws://URL格式*/
var Socket = new WebSocket("wss://10.0.0.189/wss/chat")
/*连接建⽴时触发*/
mes.innerHTML += "<br>连接已建⽴！╰(￣▽￣)╮";
//alert("连接已建⽴，可以进⾏通信")
};
/*客户端接收服务端数据时触发*/
var received_msg = ev.data; /*接受消息*/
var aLi = "<li>" + received_msg + "</li>";
mes.innerHTML += aLi;nginx部署前端项目
/*jq⽅式*/
// $(mes).append($(aLi));
};
/*连接关闭时触发*/
mes.innerHTML += "<br>连接已经关闭...(┬＿┬)";
};
}else{
/*浏览器不⽀持 WebSocket*/
alert("您的浏览器不⽀持 WebSocket!");
}
}
function WebSocketSend() {
/*form ⾥的Dom元素(input select checkbox textarea radio)都是value*/            var send_msg = ElementById('text').value;
//或者JQ中获取
// var send_msg = $("#text").val();
/*使⽤连接发送消息*/
Socket.send(send_msg);
}
</script>
</body>
</html>
后端代码(来源⽹友，⾃⼰稍作修改)：
# coding:utf-8
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):
class ChatHandler(WebSocketHandler):
users = set()  # ⽤来存放在线⽤户的容器
def open(self):
self.users.add(self)  # 建⽴连接后添加⽤户到容器中
for u in self.users:  # 向已在线⽤户发送消息
print("user count {}".format(len(self.users)))
u.write_message(u"[%s]-[%s]-进⼊聊天室" % (_ip, w().strftime("%Y-%m-%d %H:%M:%S")))
print("{} enter room"._ip))
def on_message(self, message):
for u in self.users:  # 向在线⽤户⼴播消息
u.write_message(u"[%s]-[%s]-说：%s" % (_ip, w().strftime("%Y-%m-%d %H:%M:%S"), message))            print("{} says {}"._ip, message))
def on_close(self):
ve(self) # ⽤户关闭连接后从容器中移除⽤户
for u in self.users:
u.write_message(u"[%s]-[%s]-离开聊天室" % (_ip, w().strftime("%Y-%m-%d %H:%M:%S")))
print("{} leave room"._ip))
def check_origin(self, origin):
# 接受所有跨源流量
return True
# 若要允许来⾃站点任何⼦域的连接，您可以执⾏如下操作：
# parsed_origin = urllib.parse.urlparse(origin)
# return dswith(".mydomain")
if __name__ == '__main__':
tornado.options.parse_command_line()
app = tornado.web.Application([
(r"/", IndexHandler),
(r"/wss/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, xheaders=True)
http_server.listen(options.port)
tornado.ioloop.IOLoop.current().start()
配置NGINX，运⾏代码：
1. 准备⼯作： ⼀台虚拟机或服务器， 安装nginx, python3.6, tornado，把后端代码拷贝上去。
2. nginx配置：
/etc/nginx/conf.d 下新增个⽂件 f
server_tokens off;
upstream wss_svr {
server 127.0.0.1:8000;
}
server{
listen 80;
server_name 10.0.0.189;
add_header Strict-Transport-Security max-age=15768000;
return 301 $server_name$request_uri;
}
server {
listen 443;
server_name 10.0.0.189;
ssl on;
index index.html index.htm;
ssl_certificate  cert/10.0.;
ssl_certificate_key  cert/10.0.0.189.key;
ssl_session_timeout 5m;
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_prefer_server_ciphers on;
location /ws {
alias /var/www/web_chat/;
index index.html;
}
location /wss {
proxy_redirect off;
proxy_pass wss_svr;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $remote_addr:$remote_port;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection upgrade;
proxy_read_timeout 180s;
}
}
3. 本地⽣成证书，放在 /etc/nginx/cert ⽬录下， 证书脚本如下，⽣成时输⼊服务器ip地址
read -p "Enter your domain [ample]: " DOMAIN
echo "Create "
openssl genrsa -des3 -out $DOMAIN.key 1024
echo "Create server certificate "
SUBJECT="/C=US/ST=Mars/L=iTranswarp/O=iTranswarp/OU=iTranswarp/CN=$DOMAIN"
openssl req -new -subj $SUBJECT -key $DOMAIN.key -out $DOMAIN.csr

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。