[Writing] I want to display the variables used in the program on the server side in real time on the browser and update them.

I'm about to write, but I got stuck on the way ... It's okay to close it without publishing it as a draft ...

The reason why I got stuck is that I understand that WebSocket starts communication from the client side to the server at any time, but I do not know how to communicate from the server side to the client at any time ...

For the time being, the following are preliminary surveys

The mechanism that realizes two-way communication between the browser and the server used to be called polling with JavaScript or comet ... Recently, I don't often see the word Websocket.

For a general talk about two-way communication technology, refer to the following

And the other day I did a client-side implementation of Websocket

What I want to do this time is as the title, and I will implement it myself on both the server side and the client side, so study from 1 ...

After looking at various things, I could understand the following quickly

The above understanding has deepened, if anything, on the client side ...

An instance of WebSocket in JavaScript in the implementation on the browser / HTML + JavaScript side? To describe the behavior / behavior when receiving a message from the server

So, on the server side, an implementation that sends a message when the number of clients increases was described as a sample.

What I want to do is to allow the server side to send a message at any time, and the client side refreshes the screen display when the message is received, and also implements the update process from the client side.

Something a little difficult was written at the beginning, but ... The following also helped me understand how it works.

Docker and uwsgi are a little extra information, but ...

It seems that the implementation on the client side can be used, WebSocket is started when the button is clicked, a message is created from the client side to the server when the connection is started, and when the server side receives the message, the contents are directly sent to the client. To receive a message from the server side and display it at the prompt on the client side

I don't know when the client-side onclose event will occur ...

The program I'm trying to embed this time uses a framework called responder in Python, so the following implementation example will be helpful.

Server side implementation is helpful

@api.route('/ws', websocket=True)
async def websocket(ws):
    await ws.accept()
    key = ws.headers.get('sec-websocket-key')
    clients[key] = ws
    try:
        while True:
            msg = await ws.receive_text()
            for client in clients.values():
                await client.send_text(msg)
    except:
        await ws.close()
        del clients[key]

The trigger when sending data from the client side to the server is when you press enter, which may be usable

window.onload = function () {
  textbox.addEventListener('keypress', function (e) {

    //Send a message when the enter key is pressed
    if (e.keyCode == 13) {
      ws.send(textbox.value);
      textbox.value = "";
    }
  });
}

So, after researching so far, I realized that I didn't even know about simple page drawing with responder in the first place, so I picked up information about that.

It's not just page drawing, but the following is a lot of reference

Recommended Posts

[Writing] I want to display the variables used in the program on the server side in real time on the browser and update them.
I want to display the progress in Python!
I want to replace the variables in the python template file and mass-produce it in another file.
I tried to illustrate the time and time in C language
I tried to display the time and today's weather w
I didn't want to write the AWS key in the program
[Selenium] I want to display the browser by hitting the driver on the host OS from WSL
I want to record the execution time and keep a log.
I tried to describe the traffic in real time with WebSocket
I want to use Ubuntu's desktop environment on Android for the time being (Termux version-Japanese input in desktop environment)
For the time being using FastAPI, I want to display how to use API like that on swagger
I want to separate the processing between test time and production environment
[Google Colab] I want to display multiple images side by side in tiles
For the first time in Numpy, I will update it from time to time
I want to display the progress bar
[Python] I want to know the variables in the function when an error occurs!
I want to use Python in the environment of pyenv + pipenv on Windows 10
I want to make a music player and file music at the same time
I want to store the result of% time, %% time, etc. in an object (variable)
I want to get the file name, line number, and function name in Python 3.4
Read the csv file and display it in the browser
I want to write in Python! (3) Utilize the mock
Execute the command on the web server and display the result
I want to restart CentOS 8 on time every day.
I want to use the R dataset in python
I want to absorb the difference between the for statement on the Python + numpy matrix and the Julia for statement
I don't tweet, but I want to use tweepy: just display the search results on the console
I want to use the Ubuntu desktop environment on Android for the time being (Termux version)
I want to use Ubuntu's desktop environment on Android for the time being (UserLAnd version)
I want to move selenium for the time being [for mac]
Display numbers and letters assigned to variables in python print
I tried to summarize the code often used in Pandas
[Python] Display the elapsed time in hours, minutes, and seconds (00:00:00)
Display the time in Django according to the user's region (UTC)
I tried to summarize the commands often used in business
I want to know the features of Python and pip
I want to make the Dictionary type in the List unique
I want to count unique values in arrays and tuples
I want to map the EDINET code and securities number
To disable the browser cache on Python's simple HTTP server
I want to align the significant figures in the Numpy array
I want Sphinx to be convenient and used by everyone
I want to create a Dockerfile for the time being.
I want to create a histogram and overlay the normal distribution curve on it. matplotlib edition
Part 1 I wrote the answer to the reference problem of how to write offline in real time in Python