PHP&JavaScript control series client data storage

One thing that all programmers love to do is write a program that generates programs. On the web, we face two different development environments: client (browser) and server. According to the definition of the HTTP protocol, you can write a program on the server side that outputs a program using another language that can be executed on the client side. Let's choose PHP (of course) to write the server program and JavaScript to write the client program. In this article, I will show you how to use this combination to store data on the client and minimize data exchange between the server and the browser, so that it can be used in some interactive applications, such as chat rooms, news systems, or What do you want.

Elements:

PHP4
JavaScript
Frames

Idea:
We will temporarily try to develop an HTTP chat room program written in PHP. HTTP is not a good protocol for chatting, but it is immune to firewalls and proxy servers, and we can use PHP to its full potential without the need for Java applets. There are two main problems with the chat room program: The first is that IE does not support the "push" method, so it needs to be made into a full "pull" application (referring to the client automatically refreshing). Not very natural for a chat program. We intend to make the refresh time of the client adjustable, and the server will generate the refresh time based on the result of a function on the server for receiving message data within the previous x minutes. The second problem is more difficult to solve: because of the automatic refresh method, the server needs to send all the information to the client every time, and we estimate that it will cause a large amount of transmission. And a sample program we made to simulate a simple chat room model also showed that this is the main reason for chat delay. This article deals with the second and further question.

Normal model:
By using frames, you can refresh a specific frame without reloading other frames. This is useful for minimizing c/s transmission. Our model is based on the following design:


Master file, used to define the frame structure.
Load frame file.
Show frame files.
　In our design, the load frame is automatically refreshed every "x" seconds. The idea is to save the data in the main file and allow the load frame file to request data from the server that the client has not yet received. We use timestamps to mark messages, news or things that can be transmitted, and through it we can know which one needs to be passed to the client and which one does not. We use PHP4's session feature to save the "last timestamp" on the client so that it is also visible on the server. When the load frame file receives data, the data is saved in the main file (note that the main file may be large, but it is only transferred once), and then the display frame file is refreshed. For further optimization, we keep the display frame file as short as possible. In this frame, we just call a "display" JavaScript function. This function is obviously saved in the main file. This function uses the data saved in the main file. Dynamically draw display frames. Let’s take a look at this method:

The browser requests the main file (frame structure)
The main file is transferred from the server, it defines the frame structure, and then other frames (loading frames and display frames) are transferred.
The loaded frame file is parsed on the server, and if the client does not have a "timestamp" session variable, it retrieves all the data from the server
and generates JavaScript code to store the data in the main file. Then set the "timestamp" session variable.
Then load the frame file and generate JavaScript code to enable the client to refresh the display frame file.
This refresh causes the display frame file to call the "display" function, which generates display frames based on data.
Every "x" seconds we go back to (2)
Our analysis of this method is as follows:

We want three files:

Main file (large, contains display code and saved variables and initial values)
Installation Incoming frame file (small, contains php code for retrieving data from the server and generating JavaScript code)
Display frame file (very small, only one call to the display function in the main file)


Only the main file is transferred once.
Load frame files and display frame files are transferred every "x" seconds.
The loading frame file may be larger the first time it is called, and then it becomes very short because only data that has not been retrieved by the client is retrieved each time.
The same goes for displaying frame files.
Since the display results are processed on the client side, we reduce the loading of server data.

Are you confused? Let's take a look at an example:

In this example, we built a chat room. It can't really be used yet. It's just used to demonstrate how to implement our model. Please don't ask "Why don't you add this to the chat room?" Or add that function" and so on. If you find this model useful, you can use it to build a chat room complex enough to meet your requirements, but keep in mind that it can be used for more than just chat rooms.