preface

Reference nail debugging page implementation, for learning only!

Function as follows:

The PC side writes the code, the mobile side executes

The pain points addressed are:

Avoid writing test pages repeatedly when debugging hybrid applications

Source code and Examples

The source code

Github.com/dailc/node-…

run

1. 'NPM install' 2. 'NPM run serve' starts' node 'service 3. Browser opens'./test/ debutest.html 'page 4. Start the test (open the browser directly or scan the code on the mobile phone). Note that the links on the mobile phone must be in the same network segmentCopy the code

Note ⚠️, in practice rewrite the client page to support the API for Hybrid containers

The sample

The principle of

The principle is actually very simple, is HTML5 websocket, and for convenience, but also directly use the mature third-party library socket.io

The basic interaction is as follows:

1. Start a node background (console) and listen for socket connections based on express and socket. IO 2. Open a PC debugging page, connect the background, create a room (can create N rooms) 3.PC page based on the room number to generate the corresponding room client address (each room can have N clients), and create two-dimensional code based on the address. Easy to use (can be based on 'qrcode.js' library) 4. The' Hybrid 'client scan code (or open the client link), the client page connected to the background, according to the current room number, create a client in the room 5. After the code is input on the PC side, click execute, the code text will be sent to the background. The background then pushes the code to the client, which executes the code through 'eval' and notifes the PC in the same wayCopy the code

Note that:

  • The server is the socket. IO package referenced by NPM

  • The client refers to the socket.io. Js file published in the socket.io-client project

In addition:

  • The daemon is written directly based on es6 syntax, and then packaged into dest file based on gulp. It actually runs the publishing file in DEST. The code specification is close to airbnb

  • The front page is more casual, the style is also a lot of the original nail style, also did not consider the compatibility of various browsers

  • Why the Hybrid debug page? Because the core requirement to build it is to debug hybridAPI

steps

Because of space (and not necessarily), I won’t cover all of the code, just some of the key steps, and you can read the source code directly (the source code is clear enough).

designDebugRoom(PC) andDebugClient(hybridSide)

According to interaction, both PC end and hybrid end need to be connected to the background, so two classes are directly encapsulated here

DebuRoom class

The definition of a room is:

  • There is only one socket reference

  • There is a room ID identifier

  • Clients can be managed in the room (add, delete, search)

Class DebugRoom {// Room id this._roomId // socket object this._socket // Client hold default is an empty object, the key is clientid, Value is client this._Clients ID () Clients () Socket () getClientsCount() removeClient(client) addClient(client) clearClients() }Copy the code

DebugClient class

The definition of a client is:

  • There is only one socket reference

  • There is a client ID identifier

  • There is a room ID reference that points to the appropriate room number (which can also refer to the DebugRoom object).

Class DebugClient {// owning roomId this._roomid // client id this._clientid // holding socket object this._socket id() roomId() socket()}Copy the code

Design some interactive interfaces

The front and back end interactions are via events defined in socket. IO. The following are the room and client and background interaction event interfaces

Generic interaction event

Background:

IO. On ('connection',...) // The client will be notified to fire the 'open' event IO. // The background listener closes the connection. Whenever the connection closes (the front end closes directly or calls' socket.disconnect '), it checks the local room and client. If the client is closed, it removes the client. Remove and close all client IO. On ('disconnect',...) in the roomCopy the code

Room and Client:

// If it is a room, the background will be told to trigger 'create room', otherwise the background will be told to trigger 'create client' socket.on('open',...) // The foreground listens to whether the connection is closed socket.on('disconnect',...)Copy the code

Room and background interaction events

Background:

IO. On (' Create room',...) IO. On ('dispatch data',...)Copy the code

Room:

On ('client created',...) Socket. On ('client destroy',...) Socket. On ('client excuted',...)Copy the code

Client and background interaction events

Background:

IO. On ('create Client ',...) IO. On ('client excute notify',...)Copy the code

Client:

Socket. On (' Receive dispatch data',...)Copy the code

Some logical details

The above process is the basic idea and interaction of the whole program, and some interaction details are supplemented here

  • Use global roomsHash and clientsHash to cache all rooms and clients for direct lookup

  • Each time the id is created, it can be directly bound to the socket for convenience

  • It is better not to use room and client ID directly, but to enter the code once (so that you can use Chinese directly).

  • When the client is disconnected, check whether the room is destroyed and do not repeat the operation

  • When a connection is lost, references in the cache are cleared promptly

For more information please refer to github.com/dailc/node-…

The appendix

The resources

  • socket.io/docs

  • Nail JSAPI console