In order to support the many-to-many relationship between Mobile App and Web Shop, I will maintain the following data structure for the background Web Socket server.

The key is the SourceID of the Web shop, also known as a SiteID, such as “Nike”, “Adi” and so on. The value is a collection of user information for each Web shop that has been interacted with using the mobile App, i.e. a JavaScript array. Each element of this array is a JavaScript object with two fields, the UserID is the unique identity of the user, and the socket_id is the data structure we use for socket programming in our NodeJS code.

The socket_id is not used because the mobile App communicates with the background server through HTTP rather than TCP

Web Shop source code only one set, such as demo when three Web Shop, with the command line to start three Instances of The Web Shop:

For example,

Npm run serve -SourceID = Nike

Npm run serve -SourceID = Adi

Npm run serve -SourceID = Speedo

This renders the site, the associated tag text is dynamically rendered, and the value comes from the SourceID parameter passed by NPM Run Serve.

Every Vue website must know whether it is Nike, Adi or Speedo. When these websites connect to WebSocket server, send a Handshake request to WebSocket server. The only record payload is SourceID = Nike. The WebSocket server receives this and allocates an empty record in the HashMap:

Then user A and user B walk to the booth at the same time and scan the Nike QR code displayed on one of the computers with the mobile App. The background server writes the information corresponding to these two users to the hashMap key=Nike entry.

For more of Jerry’s original articles, please follow the public account “Wang Zixi “: