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 debugginghybridWrite various test pages repeatedly during application

Source code and Examples

The source code

Github.com/dailc/node-…

run

1.`npm install`

2.`npm run serve`Start the`node`service3.Browser open`./test/debugroom.html`page4.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

image

image

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) based on`express`and`socket.io`Listening to the`socket`The connection2.Open a PC debugging page, connect to the background, create a room (can create N rooms)3.The PC page generates the client address of the corresponding room based on the room number (each room can have it`N`Client), and create qr codes based on the address for easy use (can be based on`qrcode.js`Such as libraries)4.`Hybrid`After the client scans the code (or opens the client link), the client page connects to the background and creates the client in the room according to the current room number5.After the PC enters the code and clicks execute, the code text will be sent to the background, and then the background pushes it to the client, and the client passes`eval`This code can be executed, and the PC can be notified in the same way after executionCopy 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 number
    this._roomId
    // The socket object being held
    this._socket
    // The client holds an empty object by default, with key as clientid and value as 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 {
    // Room number
    this._roomId
    // Client ID
    this._clientId
    // The socket object being held
    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:

// The background listens for connections, notifies the client to fire the 'open' event every time there is a connection (through 'IO. Connect')
io.on('connection',...).Whenever the connection is closed (the front end closes directly or calls' socket.disconnect '), the local room and client are checked. If the client is closed, the client is removed and references under the room are empty. Otherwise, remove and close all clients in the room
io.on('disconnect',...).Copy the code

Room and Client:

// If it is a room, it will tell the background to trigger 'Create room', otherwise it will tell the background 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:

// Listen to create a room. If the room ID is valid, a new room is created (new DebugRoom).
io.on('create room',...).// Listen to the room distribution data and forward the data to all clients in the room, notifies the clients to trigger the 'receive Dispatch data' event
io.on('dispatch data',...).Copy the code

Room:

// Listen for client creation and notify the room when each client joins the corresponding room
socket.on('client created',...).// The listening client is closed, and the room is notified when each client exits
socket.on('client destroy',...).// Listen to the client execution, each time the client performs the distribution data, it will notify the room whether the execution is successful
socket.on('client excuted',...).Copy the code

Client and background interaction events

Background:

// If the room already exists and the client ID is valid, the room will be created normally. After creation, the room will be notified to trigger the 'Client created' event
io.on('create client',...).// Listen for the client to respond to the execution. After the client performs a data distribution, it will notify the background. After receiving this event, the background will notify the room to trigger the 'client Excuted 'event
io.on('client excute notify',...).Copy the code

Client:

// The listener receives the distribution data. After receiving the data, it executes the code in the data and notifies the background if the execution is successful, triggering the 'client excute Notify 'event in the background
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