Closed msyazwan closed 2 years ago
Hey @msyazwan thanks for reporting. Mount location. for socket.io is on /ws
so what you could actually do is change a resource on the clientside like so:
var io = require('socket.io').listen(app, { resource: '/ws/socket.io' });
You can also change mount location on the SocketManager, but they may be some conflicts with FastAPI routes (that's why the default mount location is set to /ws
).
i.e. sio = SocketManager(app=app, cors_allowed_origins=["*"], mount_location='/')
NOTE: Be careful with changing the mount location.
got the same issue with the similar code =\ i think problem is on the FastAPI side... routes are exactly right
got the same issue with the similar code =\ i think problem is on the FastAPI side... routes are exactly right
Yeah I'm still can't get this working. My frontend is just a simple HTML file and I call socket io from CDN. Most probably the issue is from FastAPI side.
@msyazwan @makusudi Can you share your client code where you're connecting to websocket using socket.io library?
@pyropy @msyazwan finally i did it, see this comment and versions of required libraries
I build a little demo to tryout bidirectional communication via websockets in FLASK, which worked ok. Now I am trying to do the same setup with FastAPI (and fastapi-socketio instead of flask-socketio) which fails to connect, displaying the same error. Can someone please explain what I am doing wrong? Thank you in advance!
index.html:
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/3.1.3/socket.io.js"
integrity="sha512-2RDFHqfLZW8IhPRvQYmK9bTLfj/hddxGXQAred2wNZGkrKQkLGj8RCkXfRJPHlDerdHHIzTFaahq4s/P4V6Qig=="
crossorigin="anonymous"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<script type="text/javascript">
$(document).ready(function () {
//var socket = io.connect('http://' + document.domain + ':' + location.port);
var socket = io('http://localhost:8000/ws', {path: 'ws/socket.io'});
socket.on('connect', function (event) {
console.log('user is connected now');
socket.emit('client_connect_event', { data: 'User connected' });
});
socket.on('server_antwort_01', function (msg, cb) {
$('#log0').append('<br>' + $('<div/>').text('logs #' + ': ' + msg.data).html());
if (cb)
cb();
});
$('form#start').submit(function (event) {
socket.emit('client_start_event', { data: 'Start doing something' });
return false;
});
$('form#stop').submit(function (event) {
socket.emit('client_stop_event', { data: 'Stop doing something' });
return false;
});
});
</script>
<h1>Websocket Demo</h1>
<h2> Press below to display something send from Server</h2>
<form id="start" method="post" action="#">
<input type="submit" value="Start">
</form>
<form id="stop" method="post" action="#">
<input type="submit" value="Stop">
</form>
<h3> Log </h3>
<div id="log0"></div>
</body>
</html>
mainSocket.py
from fastapi import FastAPI
from fastapi_socketio import SocketManager
from fastapi.responses import HTMLResponse
app = FastAPI()
socket_manager = SocketManager(app=app)
html = ""
with open('index.html', 'r') as f:
html = f.read()
@app.get("/")
async def get():
return HTMLResponse(html)
@app.sio.on('client_connect_event')
async def handle_client_connect_event(message):
print(message)
await app.sio.emit('server_antwort01', {'data': 'connection was successful'})
@app.sio.on('client_start_event')
async def handle_client_start_event(message):
print('Server says: start_event worked')
print(message)
await app.sio.emit('server_antwort01',{'data':'start event worked'})
@yellowMtn Hi there, I took a look at your code and here's some changes that I made in order to get it working.
I've updated your mainSocket.py
file with proper argument for socket.io handler functions. Here's an updated example.
from fastapi import FastAPI
from fastapi_socketio import SocketManager
from fastapi.responses import HTMLResponse
app = FastAPI()
socket_manager = SocketManager(app=app)
html = ""
with open('index.html', 'r') as f:
html = f.read()
@app.get("/")
async def get():
return HTMLResponse(html)
@app.sio.on('client_connect_event')
async def handle_client_connect_event(sid, *args, **kwargs):
await app.sio.emit('server_antwort01', {'data': 'connection was successful'})
@app.sio.on('client_start_event')
async def handle_client_start_event(sid, *args, **kwargs):
print('Server says: start_event worked')
await app.sio.emit('server_antwort01',{'data':'start event worked'})
In the client code I've changed connection string from http://localhost:8000/ws
to ws://localhost:8000
. Here's an full updated example:
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/3.1.3/socket.io.js"
integrity="sha512-2RDFHqfLZW8IhPRvQYmK9bTLfj/hddxGXQAred2wNZGkrKQkLGj8RCkXfRJPHlDerdHHIzTFaahq4s/P4V6Qig=="
crossorigin="anonymous"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<h1>Websocket Demo</h1>
<h2> Press below to display something send from Server</h2>
<form id="start" method="post" action="#">
<input type="submit" value="Start">
</form>
<form id="stop" method="post" action="#">
<input type="submit" value="Stop">
</form>
<h3> Log </h3>
<div id="log0"></div>
</body>
<script type="text/javascript">
$(document).ready(function () {
var socket = io('ws://localhost:8000', {
path: '/ws/socket.io'
});
socket.on('connect', function (event) {
console.log('user is connected now');
socket.emit('client_connect_event', { data: 'User connected' });
});
socket.on('server_antwort_01', function (msg, cb) {
$('#log0').append('<br>' + $('<div/>').text('logs #' + ': ' + msg.data).html());
if (cb)
cb();
});
$('form#start').submit(function (event) {
socket.emit('client_start_event', { data: 'Start doing something' });
return false;
});
$('form#stop').submit(function (event) {
socket.emit('client_stop_event', { data: 'Stop doing something' });
return false;
});
});
</script>
</html>
Let me know if you have more questions. To all other people involved in the conversation I would like to apologise for not being active recently.
If someone is facing a problem connecting the client with the server despite everything being correctly configured do not forget to add transportation property on the client as is mentioned here https://github.com/miguelgrinberg/python-socketio/issues/205#issuecomment-647045744.
transports: ['websocket', 'polling', 'flashsocket']
I try to run the package but received this error:
127.0.0.1:51474 - "GET /socket.io/?EIO=3&transport=polling&t=NOi5NZ- HTTP/1.1" 404 Not Found
This is my code