前端
使用socket.io.min.js是node.js的一个websocket库。首先创建socket, emit是向后端发送消息, message是该条消息的名称,后面是发送消息的数据。on是注册接受消息的事件,获取后端传过来的数据。namespace为websocket的命名空间,可理解为可与此类的namespace进行通信。当连接成功时,会触发connect事件,连接关闭时,触发disconnect事件。
namespace = "/wechat"
var socket = io.connect('http://' + document.domain + ':' + location.port + namespace);
socket.emit("message", {"data": "zhangsan"})
socket.on('connect', function (data) {
socket.emit('message', {'data': 'I\'m connected!'});
});
socket.on('disconnect', function (data) {
socket.emit('message', {'data': 'I\'m disconnected!'});
});
后端
send 和 emit区别,send发送的是无命名的数据,而emit是发送有命名的数据。on是注册接收前端消息的方法,message是指接收的信息的名称,和前端对应。namespace是指一类的消息,和前端对应。emit是指向前端发送消息,对应的消息的名称、数据和namespace。默认的两个事件,connect和disconnect,当websocket连接成功和失败时,自动触发这两个事件。
示例代码
# socketIO.py
from flask import Flask, render_template
from flask_socketio import SocketIO
app = Flask(__name__)
app.config['SECRET_KEY'] = 'secret!'
socketio = SocketIO(app)
@app.route('/')
def index():
return render_template('socketIO.html')
@socketio.on('message', namespace="/wechat")
def handle_message(message):
print('received message: ' + message['data'])
socketio.emit("response", {'age': 18},namespace="/wechat")
@socketio.on('connect', namespace="/wechat")
def connect():
print("connect..")
@socketio.on('disconnect', namespace="/wechat")
def connect():
print("disconnect...")
@app.route('/push')
def push():
event_name = "eventname"
data = {'data':"test message!"}
socketio.emit(event_name, data, namespace="/wechat")
return "OK!"
if __name__ == '__main__':
socketio.run(app, port=8080)
# socketIO.html
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
<script type="text/javascript"
src="//cdnjs.cloudflare.com/ajax/libs/socket.io/3.1.0/socket.io.min.js"></script>
</head>
<body>
<h1>Demo of SocketIO</h1>
<div id="t"></div>
<script type="text/javascript" charset="utf-8">
$(document).ready(function () {
namespace = "/wechat"
var socket = io.connect('http://' + document.domain + ':' + location.port + namespace);
socket.emit("message", {"data": "zhangsan"})
socket.on('connect', function (data) {
socket.emit('message', {'data': 'I\'m connected!'});
});
socket.on('disconnect', function (data) {
socket.emit('message', {'data': 'I\'m disconnected!'});
});
socket.on('response', function (data) {
console.log(data.age)
});
socket.on('eventname', function (data) {
var t = data.data;
if (t){
$("#t").append(t).append('<br/>')
}
});
});
</script>
</body>
</html>
运行socketIO.py文件,浏览器打开127.0.0.1:8080即可访问。
运行结果如下: