sockets - 烧瓶套接字(服务器端)未与客户端(Javascript)连接
问题描述
客户端未与服务器端连接。
服务器端代码:
from flask import Blueprint, render_template
from hook.routes.auth import login_required
# from flask_socketio import emit, join_room, leave_room
from .. import socketio
chat = Blueprint('chat', __name__)
@chat.route('/')
@login_required
def index():
""" chat page if user is logged in """
return render_template('main/chat.html')
@socketio.on('connecting', namespace='/chat')
def connected(data):
print("""
connecting server-side...
""")
print(data)
客户端 CODEconsole.log("Javascript (聊天脚本) 已连接。")
document.addEventListener('DOMContentLoaded', () => {
// Connect to Websocket
var socket = io.connect(location.protocol + '//' + document.domain + ':' + location.port + '/chat');
console.log("Starting sockets! " + location.protocol + '//' + document.domain + ':' + location.port + '/chat')
// When connected
socket.on('connect', () => {
console.log("Connecting script...");
socket.emit('connecting', {'data': 'I\'m connected!'});
})
});
没有错误,但服务器端没有从客户端接收数据。
解决方案
将事件名称更改为其他名称将使代码正常工作。我将事件名称“connecting”更改为其他名称(“connected”),甚至尝试了其他词。它仍然有效。
客户端代码:
console.log("Javascript (chat-script) connected.")
document.addEventListener('DOMContentLoaded', () => {
// Connect to Websocket
var socket = io.connect(location.protocol + '//' + document.domain + ':' + location.port + '/chat');
// When connected
socket.on('connect', () => {
console.log("Connecting script...");
socket.emit('connected', {'data': 'I\'m connected!'});
});
});
服务器端代码:
from flask import Blueprint, render_template
from hook.routes.auth import login_required
# from flask_socketio import emit, join_room, leave_room
from .. import socketio
chat = Blueprint('chat', __name__)
@chat.route('/')
@login_required
def index():
""" chat page if user is logged in """
return render_template('main/chat.html')
@socketio.on('connected', namespace='/chat')
def connected(data):
print("""
connecting server-side...
""")
print(data['data'])
现在,它可以正常工作了。
推荐阅读
- git - git合并文件有冲突
- javascript - 遇到 npm 问题
- r - 使用堆叠的 geom_bar 时如何将色调限制为两个值
- javascript - 如何比较 Javascript 中两个 promise 产生的值?
- javascript - 删除单击对象的事件侦听器
- reactjs - 传递给 createStore 的 preloadedState 参数具有意外的“数组”类型。预期参数是具有以下键的对象
- spring - 使用spring security时无法访问jsf页面,出现403
- events - reactJS - 将事件处理程序添加到此时可能存在或可能不存在的元素
- java - 用于将新创建的对象传递给方法的字节好友代码
- list - 使用 TCL 将列表中的非科学值转换为科学值