Flask socketio seems working with angular socketio, but nothing show up? #1770

JAckZ97 · 2022-01-16T06:27:03Z

JAckZ97
Jan 16, 2022

Hi, I'm new to the angular framework and my project seems have some issue with frontend backend socket connection.

Flask socket-io code:

app = Flask(__name__)   
app.config['SECRET_KEY'] = 'secret!'  
socketio = SocketIO(app, cors_allowed_origins="*")  
CORS(app)

@socketio.on('server_response')
def handle_my_custom_event():
    print("message send")
    while True:
        send_message = dict()
        day_time = dict()
        viewer_count = twitch.get_viewer_count_by_game_id(twitch.get_game_id_by_name("Far Cry 5"))

        send_message["uuid"] = str(uuid.uuid4())
        send_message["game_name"] = "Far Cry 5"
        send_message["date_and_time"] = time.ctime()
        send_message["viewer_count"] = viewer_count

        socketio.emit('server_response', send_message)
        socketio.sleep(1)

Angular socketio code:
service .ts:

  socket: any;
  readonly url: string = "http://127.0.0.1:5000/"

  constructor() {
    // this.socket = io(this.url, { transports : ['websocket'] });
    this.socket = io(this.url);
  }

  listen(eventName: string){
    return new Observable((subscriber) =>{
      this.socket.on(eventName, (data: any)=>{
        subscriber.next(data);
      })
    })
  }

component.ts:

  constructor(private service: DashboardsService) { }

  ngOnInit() : void { 
    this.service.listen('server_response').subscribe((data) =>
      this.viewerCount = data 
    )

Backend terminal:

127.0.0.1 - - [16/Jan/2022 01:23:14] "GET /socket.io/?EIO=4&transport=polling&t=NvXZTug HTTP/1.1" 200 423 0.000000
127.0.0.1 - - [16/Jan/2022 01:23:20] "GET /socket.io/?EIO=4&transport=polling&t=NvXZVMZ HTTP/1.1" 200 423 0.000000
127.0.0.1 - - [16/Jan/2022 01:23:26] "GET /socket.io/?EIO=4&transport=polling&t=NvXZWqC HTTP/1.1" 200 423 0.000000

403 status code seems saying either server or client side is blocked.

Frontend Network:

Appreciate for any kind suggestions!

miguelgrinberg · 2022-01-16T12:19:36Z

miguelgrinberg
Jan 16, 2022
Maintainer

Wouldn't it make sense that you ask this in a forum with people experienced with Angular? I don't use that framework, so I can't really help. Sorry.

0 replies

JAckZ97 · 2022-01-16T17:53:01Z

JAckZ97
Jan 16, 2022
Author

Hi @miguelgrinberg ,

Thanks for your feedback. But the problem I have is that I am not sure where the problem comes from. Is there any ways to test the backend first? If I know the backend works fine, I will more focus on the frontend.

6 replies

JAckZ97 Jan 16, 2022
Author

Hi @miguelgrinberg ,

I wrote a test index.html page, which I'm expecting to see the value in the console.log, but nothing show up. So I guess my backend may have the problem itself.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="//cdn.bootcss.com/socket.io/1.5.1/socket.io.min.js"></script>
</head>
<body>
<h2 id="t"></h2>
<script type="text/javascript">
    $(document).ready(function() {
        var socket = io.connect('http://127.0.0.1:5000/');
        socket.on('server_response', function(res) {
            console.log(res.data)
        });
 
    });
</script>
</body>
</html>

(616) accepted ('127.0.0.1', 57450)
127.0.0.1 - - [16/Jan/2022 13:34:33] "GET / HTTP/1.1" 200 750 0.012011
127.0.0.1 - - [16/Jan/2022 13:34:33] "GET /socket.io/?EIO=3&transport=websocket&sid=5d442968fc6e48aaa4266f6bb184a6b1 HTTP/1.1" 200 0 158.933967
127.0.0.1 - - [16/Jan/2022 13:34:34] "GET /socket.io/?EIO=3&transport=polling&t=NvaAsj5 HTTP/1.1" 200 371 0.000000
(616) accepted ('127.0.0.1', 57451)
127.0.0.1 - - [16/Jan/2022 13:34:34] "GET /socket.io/?EIO=3&transport=polling&t=NvaAsjd&sid=e871e488556e430783b7336eb2027bd0 HTTP/1.1" 200 183 0.000000

miguelgrinberg Jan 16, 2022
Maintainer

Your HTML test is not sending anything to the server. If the server code that you are using is what's above, then the client must initiate by sending a server_response event, right? You aren't sending this.

JAckZ97 Jan 16, 2022
Author

Hi @miguelgrinberg ,

Interesting, I think I'm close to the problem. But I thought this line of code is listening from the server

socket.on('server_response', function(res) {

I'm not sure if I understand right, if possible, could you please provide some examples? Really appreciate for your help.

miguelgrinberg Jan 16, 2022
Maintainer

That line of code just registers a handler for the event. I recommend that you read the documentation. Both the JavaScript client and the Python server have good documentation with examples.

JAckZ97 Jan 18, 2022
Author

That line of code just registers a handler for the event. I recommend that you read the documentation. Both the JavaScript client and the Python server have good documentation with examples.

Hi @miguelgrinberg ,

Thanks for your advice. But I finally get the solution by #1455
Which my version of socket-io client is too high. Really appreciate for your on time response!!

Have a good day!

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Flask socketio seems working with angular socketio, but nothing show up? #1770

Uh oh!

{{title}}

Uh oh!

Replies: 2 comments 6 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

Flask socketio seems working with angular socketio, but nothing show up? #1770

Uh oh!

JAckZ97 Jan 16, 2022

Replies: 2 comments · 6 replies

Uh oh!

miguelgrinberg Jan 16, 2022 Maintainer

Uh oh!

JAckZ97 Jan 16, 2022 Author

Uh oh!

JAckZ97 Jan 16, 2022 Author

Uh oh!

miguelgrinberg Jan 16, 2022 Maintainer

Uh oh!

JAckZ97 Jan 16, 2022 Author

Uh oh!

Uh oh!

miguelgrinberg Jan 16, 2022 Maintainer

Uh oh!

JAckZ97 Jan 18, 2022 Author

JAckZ97
Jan 16, 2022

Replies: 2 comments 6 replies

miguelgrinberg
Jan 16, 2022
Maintainer

JAckZ97
Jan 16, 2022
Author

JAckZ97 Jan 16, 2022
Author

miguelgrinberg Jan 16, 2022
Maintainer

JAckZ97 Jan 16, 2022
Author

miguelgrinberg Jan 16, 2022
Maintainer

JAckZ97 Jan 18, 2022
Author