We Keep Coding

What steps do I need to take to replace my pygame client with a browser game?

I've written a game server in python which communicates to multiple pygame clients via sockets. Since it's a turn-based card game there isnt that much data flowing and it's in JSON format. Because I don't want people having to download the client I've started working on a 3D UI with three.js and it's not looking bad.
However I am currently stuck with the communication between the backend (my python game server) and the frontend (The webpage / client I am building with html, javascript and three.js). I feel like my question is already pretty specific and don't get any helpful results when looking online.
How can the webpage (client) and the python server communicate? What changes do I need to make on the python server side? And what do I need to know to implement this on the client side in javascript?

Because your client is running in a web browser, your main limitation is what the browser supports. Javascript in browsers is severely limited so that a website can't trick computers that visit the website into doing bad stuff.
So the first step is to find out "How can my Javascript web page communicate with a backend at all?" and then once you have chosen something, write the backend after that.
You have two options: HTTP requests (AJAX) or websockets.
An HTTP request is basically the same way the browser downloads the page to begin with, and the pictures on the page. The browser says to the server "hey, give me the address http://127.0.0.1:8000/play_card?card_number=3 and the server says back "the page says OK". Little does the browser know, that your server made you play card number 3 and now it's the next player's turn.
This is one-way - the client can ask for stuff, the server can't just send it. So the client has to keep asking over and over, whether anything has happened. The client might ask for address http://127.0.0.1:8000/game_status?player=5 and maybe the server says {} if nothing has changed. (Or maybe it says the entire game status and then you don't need the player number. Depends on the game.)
The other option is websockets. The browser sends a special request saying "hey please make this connection into a websocket" and the server sends a special response saying "okay, this connection is now a websocket", and then the connection stays open for as long as the client wants, and the client and server can send data at any time. It's not just a normal socket, though, because there are extra security measures to prevent the webpage from doing naughty stuff. And the connection always starts with an HTTP request and response.
In either case, note that http://127.0.0.1:8000 has to be the same website that the web page came from - websites can't just send requests to other websites (that would be naughty), so your server also has to serve the game page itself. (not difficult)
You can implement HTTP and/or websockets yourself by listening on a socket on port 8000 (or any other port), but you'll have to learn the HTTP protocol and get it right or else it won't work. It's actually not too difficult but it is work that you have to do. Or you can use a library someone else wrote, like http.server or websockets.

can we listen to incoming messages in node.js?

I have a registration form that sends a 5 digit number to confirm mobile phone, and the site gets the digits in next form, I want to take it one step further and if the user is registering on his phone listen on messages and auto-fill the input.
so is it possible to do that? listening to incoming messages from a browser?
if we can, how?
thanks.

You can have 2way communication with the server using WebSockets. One of the easiest ways to use WebSocket is with https://socket.io/
You create socket server with nodejs, connect with socekt.io client from browser and server can push any event to the browser just like a browser can push any event back to the server.
WebSocket communication is considered as real time while it does not create new HTTP handshake stuff.
If you want to read user's SMS. You have to have permission to do so. You can't read SMS from web application running in browser. Only way to work around i can think is this pattern:
your user has your native application which can read sms and runs in a background
your app reads sms and sends notification to your websocket server about it
your browser receives confirmation from the same WebSocket about message received

Receiving Kafka event on web browser real time

We are using Kafka cluster for sending/receiving messages at real time. We are able to publish messages to Kafka topics successfully. Now we want to receive these messages real time on a Single Page Application (SPA) running on a web browsers using JavaScript. Is it possible to push messages to SPA running on latest version any famous browser directly from Kafka? I found examples of receiving messages realtime using NodeJS but none with the JavaScript running on web browser.

There are Javascript clients for Kafka but given the description of your use case I would recommend you either use a REST or WebSocket proxy between your browser side javascript and Kafka. That will ensure the message can traverse any intermediate firewalls.

How to see the data being sent by Socket IO?

I am developing a game using SocketIO and NodeJS. However, the game currently sends too much data and I would like to figure out why by checking the data being sent every frame. How can I do this?

Open up Chrome's inspect element. Go to the network tab. Enter into the filter tab websocket and you should see a websocket item in the list. When you click on that you can then see "frames". That'll show you the data that socket.io is sending across websockets.

var socket = io();
...
socket.on("channel_data_is_being_sent_on",function(data){
console.log(data);
})
this will log all data being received by the client, from the server, in your console - which you can access in developer tools, generally F12.

How to trigger js event with Java?

I am building a java chatting web application.(Server and Client in one project)
follow is my condition
Springframework 4.2.3
JSP
Maven Project which converted from a Dynamic Web Project
Unable to use node.js
So User scenario in my head is
User enters some text and press Send
Ajax call to deliver messages to server
Server checks the users who are currently connected(from Session maybe)
Server calls other users script to append new message
I am quite confusing with step4. Is it possible that Java calls DOM event trigger?
How could a client get a new message event from server?
Thanks. :D
P.S.
These days majority of chatting servers are event-driven. Is it possible to build an event driven chatting server with Java?

Your solution is formed as if there is no WebSocket technology available to you. WebSocket is implemented to solve real time messaging issues. It pushes message to the destination.
But if to stick wih your method following is meaningful.
You need someplace to keep incoming messages such as database or session.setAttribute [bad idea]. Then use some ajax call loop on the clients machine to ask for a new incoming message from server.
Probably your server will slow down due to incoming flood of GET requests from multiple users.
to Your last question in post scriptum: yes, I use tomcat websocket api.jar in my projects. There is well written documentation on apache.org
As I mentioned, learn WebSocket if your users are not using old internet explorer browsers. There are bunch of tutorials on it...