Skip to content
This repository was archived by the owner on Apr 4, 2024. It is now read-only.
This repository was archived by the owner on Apr 4, 2024. It is now read-only.

Mobile browser click events are not detected #38

Description

@csharmatech

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>

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions