Experience summary of using ivx connection components to achieve real-time battle answering questions

In the last post, I briefly introduced the connection component and implemented a simple private chat model using the connection. Today we will make a real-time match-and-answer model. The general design idea is that user A registers to enter the connection and adds his CID to the URL and forwards it to friend B. B opens a case with URL parameters to create a room and sends an invitation to A. After A enters the room, the answer begins and the answer is correct. Add points, if the wrong answer is added, the final score will be counted.
1. There are
three fields added to the questionTable database for database storage questions. The title stores the title; the options store the options and are written in JSON format; the correctIndex stores the serial number of the correct answer. The nickname field in the userTable database where player data is stored stores the player's nickname, and matchPoint stores the player's total wins.


2. Service The
GetQuestions service is responsible for outputting and sending the questions in the questionTable to the front desk. The postUser service is responsible for finding the winning player from the database (adding a player data if not found), and updating its matchpoint field.


3. Variables The
following figure is the variable

finalResult used in the case to indicate the final result of the match. In the case, the values ​​"victory", "failed" and "tie" will be assigned to it to indicate wins, losses, and draws. The result of the current question is the answer to the current question. As a result, "Our Score" and "Opponent score" will be assigned to it in the case to indicate your own score and your opponent's score.
AnswerIndex and opponentAnswerIndex represent the answer results of yourself and the other party, that is, the serial number of the selected option, and the initial value is -1.
QuestionIndex represents the serial number of the current question, currentQuestion is used to store the current question, and all questions are stored in the questionList.

WaitTime is the countdown for the preparation before answering the question, the initial value is 5; limitTime is the countdown for the answer time, the initial value is 20.
roomID stores the ID number of the room created by the connection; opponentInfo and userInfo store the information of the opponent and itself, including the score, nickname and CID code; cid stores the URL parameters in the sharing link, which is the CID code of the game initiator.

4. Real-time battle answering process
1. The first step, the initiating player A opens the case, enters the nickname and clicks the Start button, then the current player will be registered first, and then the information of A will be stored in userInfo, pay attention to the variables at this time "Cid" is still empty, so the rest of the conditional branch is executed. The system will add the CID code of the current user A to the URL, and then display a banner. The above is the shared link with the added parameters. The user shares this link to Just friend B.


2. In the second step, B opens the link shared by A and enters the case. The front desk will read the parameters in the URL and output it to "cid" during initialization. That is, the CID code value of A stored in "cid" is not air. In this way, after B registers and stores his information in userInfo, the cid non-empty conditional branch is executed. First, getQuestions is called to get the questions from the database, then a random number is generated as the roomID and the room is created. After the creation is successful, B will send to A A personal message, the method content of the message is "starGame", which means that you are invited to enter the game. At the same time, the message content also includes roomID, player nickname, and all topics. After sending, the front desk will jump to the play page and wait for the next operation.


3. The third step is that A receives the personal message from B. If the connection monitors the personal message and the method of the message content is "startGame", it will judge whether the opponentInfo is empty. If it is empty, it means that there is no opponent. The roomID, title data, and the opponent's nickname, score, and CID sent from the other party will be saved, and then added to the other party's room.

After joining the room, A will send a room message in the room to inform the user (that is, B) in the room of player A's nickname and CID, and finally jump to the play page to start playing the waitInterval trigger.

Of course, there is also a possibility. For example, another player C also got the link shared by A and entered the case, but at this time A has entered the room of B, so player A ’s opportunityInfo parameter is already non-empty, then A will Return a rejection message to C. The connection monitors and judges that it is a rejection message.


4. Player C is just an episode. Let ’s look back at the processing of player B ’s receipt of the room message sent by player A. If the connection receives a room message with the method “enterGame” and the sender is not himself, it will send the other party ’s information. Stored in opponentInfo, start to play waitIntercal trigger.

5.waitInterval trigger and limitInterval trigger After the
above steps A and B, both players have executed to play waitInterval trigger. It implements the countdown of the preparation before each question starts to answer the question, and will end the question at the end Assign the first question in the list to "currentQuestion", then reset yourself and play the limitInterval trigger.


The limitInterval trigger controls the countdown of the answer time. There are two cases here. One is that the player answered the question. This part of the logic will be written in the click event of the option, and there are two players until the countdown ends. If there is no answer, then we will execute the setVariate action group.


6. The setVariate action group
setVariate action group will first determine the value of questionIndex. If it is not equal to the number of rows in questionList minus 1, it means that the current question is not the last question, and the content of the next question in questionList will be assigned to currentQuestion. Set waitInterval trigger and limitInterval trigger.


If they are equal, it means that all the questions have been answered, then compare the scores of yourself and your opponent, and display the result of the match. If you are the winner, call the postUser service to update your matchpoint in the database.


7. Player selection option
Now let's talk about the situation where the player answers the question before the countdown ends. When the player clicks the option row or the selection button in the option row, the serial number of the option will be assigned to answerIndex, and if the opponent does not The unanswered game does not end (ie, the initialAnswer is still the initial value -1, the finalResult is still not the initial value 0), then the player will send a personal message with the method method to the opponent, and the content of the message is the result of the answer. Then execute the checkAnswer and setVariate action groups.


Correspondingly, when the player receives a personal message whose method is choose, the result of the other party's answer in the message is assigned to the sponsorAnser, and the two action groups checkAnswer and setVariate are also executed.

8. checkAnswer action group
checkAnswer action group is used to judge the answer result of the current question. If the opponent is greater than or equal to 0 (that is, not the initial value -1), it means that the current question is the opponent ’s answer, and then judge whether the opponent ’s answer is correct. The opponent ’s answer is correct and the opponent ’s score is incremented by 1. The chooseResult value “Opponent score” indicates the opponent ’s score. If it is incorrect, the opponent ’s score is incremented by 1. The chooseResult value “Our score” indicates the opponent ’s score. 1), it means that the current question is the answer of your own, and the judgment and corresponding operation are carried out in the same way.


Finally, the whole process is summarized as follows