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
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>