pyropy / fastapi-socketio

Easily integrate socket.io with your FastAPI app 🚀
Apache License 2.0
328 stars 31 forks source link

Mobile browser click events are not detected #38

Open csharmatech opened 1 year ago

csharmatech commented 1 year ago

Hello,

I am using FastAPI with socketIO and using socket emit(Javascript) for sending client button "onclick" event to server which listens to this event and then emits some data after calculation. This works perfectly fine on laptop browser, however when I tested upon mobile browser(Chrome), the button click does not work. I tested on mobile browser with a simple Javascript alert after removing the emit function and it works. So it appears like, the issue is with socket emit.

Here is my Server Code:

from fastapi import FastAPI, Request
import json
from fastapi_socketio import SocketManager
import uvicorn
import time
import subprocess
import asyncio
from fastapi.templating import Jinja2Templates
from fastapi.responses import HTMLResponse
import socketio
from fastapi.staticfiles import StaticFiles

app = FastAPI()
sio = socketio.AsyncServer(cors_allowed_origins='*', async_mode='asgi')
socketio_app = socketio.ASGIApp(sio, app)
templates = Jinja2Templates(directory="templates")
app.mount("/static", StaticFiles(directory="static"), name="static")

@sio.on('my_event')
async def servermessage(data):
    data = asyncio.create_task(ssh())
    while True:
        if data.done():
            value = data.result()
            await sio.emit('response',"SSH Status:" + " " + value)
            break
        else:
            await sio.emit('response', "SSH Status:" + " " + "Please Wait..")

async def ssh():
    cmd1 = 'systemctl status sshd| grep Active | awk -F " " \'{print$2}\''
    listing1 = subprocess.run(cmd1,stdout=subprocess.PIPE,shell=True,universal_newlines=True)
    result = listing1.stdout
    await asyncio.sleep(8)
    return result

@app.get("/", response_class=HTMLResponse)
async def main(request: Request):
    return templates.TemplateResponse("base.html", {"request":request})

Here is my Javascript

<script type="text/javascript" charset="utf-8">
const socket = io("http://fastapi:8000");
socket.on('connect', function (data) {
  console.log('Successfully connected!');
});

function myupdate(event) {
    socket.emit("my_event", function(msg) {
       });
}
socket.on('response', function (data) {
    if(data.includes("Please")) {
        document.getElementById("sshimg").style.display="block";
        document.getElementById("ssh").innerHTML=data;
    } else {
        document.getElementById("sshimg").style.display="none";
        document.getElementById("ssh").innerHTML=data;
    }

});
</script>
  </head>
  <body>
<center>
<h1 style="color:black;background-color:#33ACFF;padding:30px">Welcome to Websockets</h1>
</center>
<br>
<button class="btn btn-info" id="button1" style="margin:5px" onClick="myupdate()">Check Services</button>
        <p id="ssh" style="font-weight:bold;"></p>
        <img id="sshimg" style="display:none;margin-left: auto;margin-right: auto;"  src="/static/Spinner.svg" alt="Trulli" width="70" height="70">
</body>
</html>