Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

An example Analysis of websocket developed by WeChat Mini Programs

2025-01-21 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

Shulou(Shulou.com)06/03 Report--

This article is to share with you the content of the sample analysis of websocket developed by WeChat Mini Programs. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Why do I need websocket?

Traditional real-time interactive games, or the behavior of the server actively sending messages (such as push service), if you want to do it on Wechat, you may use polling, but this is too resource-consuming, a large number of requests also increase the burden on the server, and the delay problem is more serious. If the app is self-developed, in order to solve these problems, many teams will build their own socket and use tcp long links and custom protocols to communicate with the server in relatively real time. There is no big problem for capable teams to adopt this approach. However, small teams may have to spend a lot of time debugging, to solve a lot of problems, which is not worthwhile in terms of cost.

H5 introduces webSocket to solve the problem of long links on the web side, and WeChat Mini Programs also supports websocket. This is a very important feature, so this series of articles will be devoted to websocket.

WebSocket is also essentially an TCP connection, which provides full-duplex data transmission. On the one hand, it can avoid the performance loss caused by frequent connection establishment and disconnection caused by polling, on the other hand, data can be transmitted in two directions in real time (because it is a long link), and WebSocket allows cross-domain communication (there is a potential cross-domain security problem, which has to be solved by the server). At present, browsers other than IE already support webSocket very well. After WeChat Mini Programs pushes it again, it will become more popular.

Let's design a new demo, a more interesting Mini Game, multiplayer minesweeper, to be exact, multiplayer gold digging.

The rules of the game are as follows: change the thunder into gold, dig into gold and add one point, and each person takes turns (A digging is finished until Bjinger B finishes digging A). Even if the gold is yours, the game will not explode, and the game will not end until all the gold on the field has been dug up. Like minesweeping, the number also indicates how much gold is around, and then the user guesses which grid may have gold based on the numbers that have been turned out on the field.

The difficulty of this interactive game is that the user's click operations have to be transmitted to the server, and the server has to be pushed to other players' applications in real time. In addition, users themselves have to receive the data transmitted in real time during each other's operation, so as not to repeat the same grid in the same point. To put it simply, you have to report the operation to the server, and the server will push messages to you in real time. In order to simplify the whole model, we stipulate that players must take turns to click, player A finished, player B, player B finished operation, player A can click.

Let's implement this function in several steps.

First, the idea of realization

1. In the first step, we want our husband to become a map scene of minesweeping.

This algorithm is relatively simple, briefly. By randomly selecting a row and column, you can locate a grid and mark it as gold (- 1 means gold). MimeCnt represents the amount of gold to be generated, marking mimeCnt random cells in a loop in the same way. After the generation, use a cycle to scan the-1 grid, add 1 to the grid around it, of course, it must be a non-gold grid to add 1. The code is here.

Among them, increaseArround is used to add 1 to all the grids around the gold grid, and the implementation is relatively simple:

Execute genMimeArr (), and the random result is as follows:

-1 means gold. There seems to be no problem taking a look at it. Next, we are going to access webSocket.

(this is the js version, in fact, the work of generating the map scene is generated in the background, this js version is just a demonstration, but the algorithm is the same. )

2. We need a server that supports webSocket

In this example, we use python's tornado framework to implement (tornado provides the tornado.websocket module). Of course, readers can also use socket.io, the server side of the js language designed for webSocket, which is very easy to use, and it also provides compatibility (flash or comet implementation) for browsers that do not support webSocket.

I prefer to use tornado, doing background development for several years, one of the most used framework is it, NIO model, and very lightweight, the same rps,java may need 700-800m memory, tornado only 30-40m, so in a 4G memory machine can run hundreds of tornado services, and java, sorry, can only run 3 virtual machines. In the era of microservices, this is important for small companies. Of course, if the reader is familiar with java, you can also choose the netty framework to try.

Another advantage of webSocket using tornado is that it can support both webSocket and http protocols on the same service (port). Tornado's official demo code shows how to use both protocols at the same time. In this game, it can be used like this: users go to the home page and use the http protocol to pull the current room number and data. Because the home page is opened the most, users who enter the home page may not necessarily play games. So there is no need to establish a webSocket link on the home page, the webSocket link is mainly used to solve frequent requests and push operations. There is only one requested action on the home page. After choosing the room number, go to the next game page and start to set up the webSocket link.

3. Client

Using WeChat Mini Programs development tool, direct connection will report domain name security error, because there are internal restrictions on the tool, the secure domain name will be allowed to connect. So similarly, here we also continue to change the source code of the tool and change the relevant lines as follows:

Find this line of asdebug.js and change it to: if (false).

`if (! I (r, "webscoket"))

Readers who are too lazy to modify can directly use the IDE I cracked. The code to initiate a websocket link is also relatively simple:

`wx.connectSocket ({url: webSocketUrl,}); add event listener before calling the request code, so that you can know whether the connection is successful: `

Wx.onSocketOpen (function (res) {console.log ('websocket opened.');})

`event of connection failure: wx.onSocketError (function (res) {console.log ('websocket fail');}) `

Event triggered when a message is received from the server:

`wx.onSocketMessage (function (res) {console.log ('received msg:' + res.data);}) when the link is established, the message is sent as follows: `

Message sending

Since the establishment of a link requires several handshakes and takes a certain amount of time, before the success of wx.connectSocket, an error will be reported if the message is sent directly by wx.sendSocketMessage. Here, do a compatibility. If the connection has not been successfully established, an array is used to save the information to be sent. When the link is established for the first time, the data is traversed and the message is reissued one by one. We encapsulate this logic into a send method, as follows:

`function sendSocketMessage (msg) {if (typeof (msg) = = 'object') {/ / can only send stringmsg = JSON.stringify (msg);} if (socketOpened) {/ / socketOpened variable is set to truewx.sendSocketMessage ({data:msg}) when wx.onSocketOpen;} else {/ / when the link is sent, socketMsgQueue.push (msg) has not been established;}} II. Demo function parsing

1. Home entry

To simplify the model and focus on webSocket, we put the home page in the form of filling in the room number ourselves. If readers have the time and ability, they can turn the home page into a list of rooms and show how many people are playing in each room, and only one person can go in and play with him. You can even add a viewing mode and click on someone else's room to watch how others play.

Fill in the input component of the room number, add an event, get its value event.detail.value and setData it to this page.

Click "start the game", and then store the room number in the globalData of app, and then wx.navigateTo to the main game page index.

This page is relatively simple.

2. Main game page

We encapsulate a websocket/connect.js module that is designed to handle websocket links. There are two main methods, connect initiates a webSocket link, and send is used to send data.

Index main page:

Initialization state, 9x9 grid, each grid is actually a button button. The map scene data we generate corresponds to each grid. For example, 1 means a piece of gold around, 0 means there is no gold around,-1 means this grid is gold, and our goal is to find these-1. The more you find, the higher the score.

A security issue is discussed here. Believe one sentence: most of the security measures taken at the front end are unreliable. The matrix in the picture above, the data behind each grid, should not be placed at the front end, because the js code can be debugged, you can set a breakpoint on the corresponding variable, you can see the entire matrix data, and then you know which lattice is gold, and you can cheat, which is very unfair. So the best way is to store these matrix data in the back end, each time the user operates, send the coordinates clicked by the user to the background, and then determine what the corresponding coordinates are, and then return to the front end. This interactive way, which seems to have a lot of data transmission, will not waste resources, because every click of the user should be reported to the background, so that another player of the game will know which grid you have clicked. Anyway, you have to send data, so you must send coordinates, so there is no need for the front end to know which grid is what data, because the push message in the background will tell you.

In this way, we bypass the problem of storing matrix data at the front end. But we still need an array to store the current matrix state, such as which grid has been opened and what data is in it, that is, to store the grid that has been opened on the field. So in the background, we need to store two pieces of data, one is all the matrix data, that is, the map scene data, and the other is the current state data, which is used to synchronize the interface of both sides.

3. End page

The condition for judging the end of the game is that all the gold on the field has been dug up. This condition is also judged backstage.

Every time a user finds gold, the background will add a judgment logic to see whether the gold is the last. If so, send an over type message to all players in the game.

When the player terminal receives this message, it ends the current game and jumps to the end page.

There is no special designer, casually stole a picture online and posted it, the interface is relatively ugly. Your score and current room number are shown below.

Third, implementation details

1. Code structure

The front-end code is divided into several modules: pages put all pages, common put general modules, mime put gold mining main logic (not used for the time being), res put resource files, websocket put webSocket-related processing logic.

Background code, readers just know a little bit about it, do not discuss too much. I put the docker file in it, and readers familiar with docker can run the entire server with a single command. The author ran the webSocket service on his own server, and the ip and port have been written in the front-end code, and the reader is abused. It may not be long before readers can run the service on their own.

2. Send and receive messages

(1) message protocol

Let's simply define the format of the message as follows. Send a message:

`{type: 'dig',... }

The message returned by the server:

{errCode: 0, data: {type: 'dig',... }}

Because the webSocket type message is different from the traditional http request, the http request has no state, a request passes and will be returned in a moment, and the data returned must be for this request. The webSocket model is like this: the client sends a lot of requests, and then does not know which data returned by the server corresponds to which request, so it needs a field to divide all the returns into multiple types and process them accordingly.

(2) send messages

It is easier to send messages. Above, we define a send method and a simple list of messages if the connection is not successful.

(3) receive messages

Readers may have a doubt when reading the code. There is only send sending method in websocket/connect.js, but there is no processing for receiving push messages, so where is the processing for receiving messages? How is it connected?

There is another file in the websocket/ directory, msgHandler.js, which is the main processing module used to process received messages:

There are three main types of messages pushed from the server: 1 Gold mining operation, which may be your own operation or the other party's operation, in which there is a field isMe to indicate whether it is your own operation. When such a message is received, the corresponding grid on the map is flipped over and the digging result is displayed. 2 for the operation of creating or entering a room, two users play in a room, and the creator starts first. 3 the message of the end of the game, when the application receives such a message, it will jump directly to the end page.

This processing logic is associated in the wx.onSocketMessage callback of websocket/connect.js.

In the process of sending and receiving messages, each message interaction is recorded by the debugging tool. You can see this in the debugger, and you can see it in NetWork- > WS:

3. Digging gold at the front end

The code is as follows:

Var websocket = require ('.. /.. / websocket/connect.js'); var msgReceived = require ('.. /.. / websocket/msgHandler.js') Page ({data: {mimeMap: null, leftGolds: 0, / / Total number of gold score: 0, / / my score roomNo: 0 / / Room number}, x: 0, / / column y: 0 in the user point, / / row in the user point onLoad: function () {var roomNo = app.getRoomNo (); this.setData ({roomNo: roomNo}) / / test / / websocket.send ('before connection'); if (! websocket.socketOpened) {/ / setMsgReceiveCallback websocket.setReceiveCallback (msgReceived, this); / / connect to the websocket websocket.connect (); websocket.send ({type:' create'});} else {websocket.send ({type: 'create', no: roomNo}) }, digGold: function (event) {/ / do not judge directly, but pass the coordinates to the background judge / / regardless of if (event.target.dataset.value < 9) {return;} / / get the coordinates of this lattice this.x = parseInt (event.target.dataset.x); this.y = parseInt (event.target.dataset.y); console.log (this.x, this.y) / / reporting coordinates this.reportMyChoice ();}, reportMyChoice: function () {roomNo = app.getRoomNo (); websocket.send ({type: 'dig', x: this.x, y: this.y, no: roomNo});},})

In the onLoad event of page, update the room number information on the interface first. Then let's start our focus. Websocket.connect initiates the webSocket link, and websocket is the module we encapsulated. Then set our msgHandler.js processing logic to the server push message callback. Next, send a create message to create or join the room. The server will respond to this message and return the map scene data of the room.

DigGold is the click event handler for each grid. There is a logic here. There are at most eight squares around a grid, so the maximum data of each grid can not be greater than 8. You can see that there is a 9 in the above code, which is actually used to distinguish it from zero. It is used to represent the data of the current unopened grid on the field, expressed by 9, of course, you can also use 10100.

The matrix data binding code for wxml is as follows:

`{{cell

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.

Views: 242

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report