CODEWITHSUNDEEP
javascripthtml
Liam
Liam

Reputation: 9855

Sites controlled with mobile phone?

I'ts not a coding question so apologies if this is in the wrong forum, but how do sites such as https://lightsaber.withgoogle.com/ work? How does the site know the user is on the page with their phone? I've seen a few of these as of late and I'm at a loss as too how they're built...

Upvotes: 0

Views: 89

Answers (2)

enguerranws
enguerranws

Reputation: 8233

It's not a coding question, you pointed it right.

But this is just what we can call Real time web, featuring technologies as NodeJS, Socket.io, etc. I played with this for fun, but I don't know any other technologies that offers the same features (there are some, it's just I don't know).

How does it work ?

  • Let's consider a webpage with 2 views : desktop and mobile (whatever the way the "mobile version" is rendered)
  • You connect your mobile to it (on the same url, or nearly the same, with some params to identify the mobile as current user's one). On the light saber game, note that it generates a custom URL to identify the user on desktop and the user on mobile as the same user.
  • When you visit the page with your mobile with that URL, Web API lets you use some features like Device Orientation (so the page can see how your mobile is positionned, for example)
  • Then, the mobile viewsend those events (mobile orientation) to the desktop view to update the way its rendered (light saber more on left, or whatever).

To go a bit deeper :

  • Mobile view emits events containing the current mobile x,y,z (this coordinates are relative to the event start. e.g. On page load, x = 0, y = 0, z = 0, whatever the device position) each time the device position changes, captured by the server.
  • The server is listening for those events, and each time it gets one, emit another event (with some trasformation, why not ?) which this time is captured by the desktop view which apply the changes with new values.

So basically, the Google light saber exeprience can be see like this :

Mobile (send position x,y,z) --> Server (get mobile position and broadcast it) --> Desktop (get mobile position from server and apply changes on the view)

I talked about Node and Socket.io because it makes this kind of experience really simple. I mean: really.

Upvotes: 5

Swiffy
Swiffy

Reputation: 4683

This has to do with the link that the page offers. The first person who navigates to the generated link with their mobile phone is the one the site is going to "connect" with.

When you visit the generated link with your phone, that (mobile) page sends a signal to the original page (by some means, like with websockets or just database fiddling) which generated the link, that someone has navigated to the generated link with their phone. After that it's just the matter of what to do next.

Simplified:

  1. Have some page A generate a link to a page B
  2. Make page A wait until generated page B signals that someone has navigated to it
  3. Make page A (and B) do something

Upvotes: 1

Related Questions