Mobile browser click events are not detected #38

csharmatech · 2022-12-15T15:14:13Z

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>

The text was updated successfully, but these errors were encountered:

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Mobile browser click events are not detected #38

Mobile browser click events are not detected #38

csharmatech commented Dec 15, 2022

Mobile browser click events are not detected #38

Mobile browser click events are not detected #38

Comments

csharmatech commented Dec 15, 2022