html前端
web.html文件
<html>
<head>
<title>websocket</title>
<script type="text/javascript" src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
var ws;
$(function() {
// 新建连接
ws = new WebSocket("ws://localhost:5000/foobar");
// 接受消息
ws.onmessage = function(evt) {
$("#placeholder").append('<p>' + evt.data + '</p>')
// ws.send('收到消息')
}
// 建立连接
ws.onopen = function(evt) {
$('#status').html('<b>Connected</b>');
ws.send('建立连接')
};
//错误
ws.onerror = function(evt) {
$('#status').html('<b>Error</b>');
};
//连接关闭
ws.onclose = function(evt) {
$('#status').html('<b>Closed</b>');
}
});
</script>
</head>
<body>
<h1>WebSocket 案例</h1>
<div>连接状态</div>
<div id="status"></div>
<hr>
<div id="placeholder"></div>
</body>
</html>
flask后端代码:
from flask import Flask, request, render_template, abort
from geventwebsocket.handler import WebSocketHandler
from gevent.pywsgi import WSGIServer
import time
web = Flask('web',__name__)
@web.route('/')
def index():
return render_template('web.html')
@web.route('/foobar')
def echo():
if request.environ.get('wsgi.websocket'):
ws = request.environ['wsgi.websocket'] #websocket对象
for i in range(10):
if not ws.closed:
# msg = ws.recive() #接受消息
time.sleep(1)
ws.send('111') #给前端发消息
if __name__ == '__main__':
http_server = WSGIServer(('0.0.0.0',5000), web, handler_class=WebSocketHandler) # web是Flask对象
http_server.serve_forever() # 启动服务
176
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
