Tornado Mobile click events not detected with socketIO #1102

csharmatech · 2022-12-17T17:35:08Z

csharmatech
Dec 17, 2022

Mobile click events are not detected when using Tornado + SocketIO. It works fine on laptop browser.

Server Code:

import os
import sys
import socketio
import subprocess
import tornado.ioloop
from tornado.options import define, options

sio = socketio.AsyncServer(cors_allowed_origins='*',async_mode='tornado')

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)
    result1 = listing1.stdout
    await asyncio.sleep(5)
    return result1

@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 is:" + " " + value)
            break
        else:
            await sio.emit('response', "Wait..")

def make_app():
    return tornado.web.Application([
        (r"/", MainHandler),
        (r"/socket.io/", socketio.get_tornado_handler(sio)),
        
    ],template_path='/home/test/tornado/templates',debug=True)

class MainHandler(tornado.web.RequestHandler):
    def get(self):
        self.render("base.html")

settings = dict(
        template_path=os.path.join(os.path.dirname(__file__), "templates"),
)

async def main():
    app = make_app()
    app.listen(8888)
    shutdown_event = asyncio.Event()
    await shutdown_event.wait()
    tornado.ioloop.IOLoop.current().start()

if __name__ == "__main__":
    asyncio.run(main())

Client side Javascript code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="Cache-control" content="no-cache" charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
<script type="text/javascript" src="//code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="//cdn.socket.io/4.4.1/socket.io.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
<script type="text/javascript" charset="utf-8">
const socket = io("http://<IP>:8888");
socket.on('connect', function (data) {
  console.log('Successfully connected!');
});
socket.on('response', function(data) {
document.getElementById("test").innerHTML=data;

});

function myupdate(event) {
	socket.emit("my_event", function(msg) {
       });
}
</script>
</head>
<style>
</style>
<body>
<center>
<h1 style="color:black;background-color:#33ACFF;padding:30px">Welcome to Tornado</h1>
</center>
<button class="btn btn-info" id="button1" style="margin:5px" onclick="myupdate()">Check Services</button>
<p id ="test"></p>
</body>

Answered by miguelgrinberg

Dec 17, 2022

Please review the information in the Troubleshooting section of the documentation. This should help you debug this problem, which to me seems to be unrelated to Socket.IO. https://python-socketio.readthedocs.io/en/latest/server.html#debugging-and-troubleshooting

View full answer

csharmatech · 2022-12-17T17:43:54Z

csharmatech
Dec 17, 2022
Author

Above is the capture from Laptop browser which is expected

0 replies

csharmatech · 2022-12-17T17:45:28Z

csharmatech
Dec 17, 2022
Author

Below is the screenshot from mobile browser where nothing happens after clicking button. It seems like button click is not detected using client emit ??

0 replies

miguelgrinberg · 2022-12-17T18:13:15Z

miguelgrinberg
Dec 17, 2022
Maintainer

Please review the information in the Troubleshooting section of the documentation. This should help you debug this problem, which to me seems to be unrelated to Socket.IO. https://python-socketio.readthedocs.io/en/latest/server.html#debugging-and-troubleshooting

6 replies

miguelgrinberg Dec 17, 2022
Maintainer

I really don't know. This 'socket.emit` that is at the center of your issue is not part of this project, you are using the JavaScript Socket.IO client for that. Aside from debugging your front end code I don't have anything else to suggest, sorry.

The same code works fine on Flask.

That cannot be. The server code that you are using is asynchronous, that code would not work with Flask. I also fail to see what Flask vs. Tornado have to do with the issue if the events are not being sent from the client.

csharmatech Dec 17, 2022
Author

I am sorry for my above comment on Flask.

I meant that, I used threading in Flask and it works fine with socketIO and mobile button click works fine.

csharmatech Dec 17, 2022
Author

I am trying to explore the asynchronous frameworks as I need to use asyncio feature and use my above code on mobile.

csharmatech Dec 17, 2022
Author

@miguelgrinberg , Thank you for your quick responses and feedback. I will try to debug more on the mobile part related issues.

csharmatech Dec 18, 2022
Author

Finally got it working..

So firstly what I eventually found out was that the websocket connection never got opened on mobile. Although the page got displayed, but the connection was not open and that's the reason that button click never worked. Secondly, I had to add below line to finally make the connection open on mobile. My webserver is running in KVM environment with port forwarding.

$(document).ready(function() {  // This line was missing
const socket = io("http://<IP>:8888/");
});

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Tornado Mobile click events not detected with socketIO #1102

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 3 comments 6 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

Tornado Mobile click events not detected with socketIO #1102

csharmatech Dec 17, 2022

Replies: 3 comments · 6 replies

csharmatech Dec 17, 2022 Author

csharmatech Dec 17, 2022 Author

miguelgrinberg Dec 17, 2022 Maintainer

miguelgrinberg Dec 17, 2022 Maintainer

csharmatech Dec 17, 2022 Author

csharmatech Dec 17, 2022 Author

csharmatech Dec 17, 2022 Author

csharmatech Dec 18, 2022 Author

csharmatech
Dec 17, 2022

Replies: 3 comments 6 replies

csharmatech
Dec 17, 2022
Author

csharmatech
Dec 17, 2022
Author

miguelgrinberg
Dec 17, 2022
Maintainer

miguelgrinberg Dec 17, 2022
Maintainer

csharmatech Dec 17, 2022
Author

csharmatech Dec 17, 2022
Author

csharmatech Dec 17, 2022
Author

csharmatech Dec 18, 2022
Author