WebSocket, Fast Control of The Photon from a webpage

Any Websocket pros in the community?

I am curious about using the Photon to control a toy car from a webpage. The cloud connection is great for IoT projects but the ~1200 ms delay is not so good for driving a toy car. I have noticed a few libraries with Websockets and a good test.ino program that works great for what it is setup to do.

I have, what I want working at https://github.com/hpssjellis/Particle-Spark-Core-Photon-Websocket-Hack but it is a hack that I made using a very old Nodejs package and my own attempt at a Websocket. It works and only takes about 10 ms to communicate with the Photon. It
sends a single character at a time, which is more than enough to control my toy car.

Just wondering if anyone has suggestions for how to make my program a bit more modern and less of a hack.

The old topic is at

I have just finished my websocket two way Node js chat hack for the Photon (It works but needs better security). Fast ~10 ms two way communication between a web page and one or more photons. (any of the photons can send info and all photons receive the information. Sort of like a chat program). Has no bloatware, no include files at all, but does need a Nodejs server.

Note: Only sends one ASCII byte at a time. So you have a maximum of 255 codes. All capital letters, all small letters, single digit numbers etc

My websocket Github is at

All that is left to add is a bit more security on the actual webpage. Lots of advanced ways to do this but I want to keep it really simple.

1 Like

I’m doing some research in direct communication with the Photon.

The idea that people can connect with a light on the local network (found through mDNS), without needing acces tokens for the cloud.

My current idea is to do this with AJAX and (small JSON). I’m aware that with embedded systems memory is an issue and speed as well.

You mention very fast speeds with Websocket, but I’m curious how they compare with AJAX. Did you test that?

Hi @kasper not really sure what you mean by the above statement. Any links about it?

I normally use AJAX for when my students connect to their photons from a webpage. See github at https://github.com/hpssjellis/particle-photon-raspberry-pi-iot

but AJAX does not speed up a connection it just allows a website form to be submitted without the web page having to be refreshed. The connection speed is still at the mercy of the server and the particle.io cloud tends to have a connection on average about 1200 ms.

My fast websocket server allows you to make a personal server geared towards simple text communication with a few photons and a webpage. The speed is about 10 ms using the websocket. The webpage however does not have to be submitted each request so it is doing a websocket form of AJAX in which it is updating an HTML DIV after each websocket call. The line of code is here

The link and method I’m referring is this one: https://www.hackster.io/wgbartley/iot-device-management-with-mdns-and-webduino-93982a

I’m designing an app and with a slider people can control the brightness of the light, of course I like a fast response. The 1200ms of the cloud is too slow.

The 10ms is more than fast enough, but if a normal AJAX call would take 50/100ms that would be still fast enough. So that would be a direct call to a webserver (WebDuino) running on the Particle Photon (bypassing the cloud). Because you mention timing so specific, I was wondering if you had some experience with that as well.

I see that AJAX is the common method, however I think current mobile browsers all support WebSocket, so that could be a valid implementation as well.

That looks really interesting @kasper the only difference is that it is for local networks. I wish I had found it before doing all the work on my websockets. When I did my research I tried tons of webserver configurations and could not get many of them working. Have you got all of the examples working? It looks like there is an AJAX example at

My system does need the cloud to authenticate the photon and works from anywhere. Your system is only going to work on a local network but looks like it skips the authentication steps, which would be useful.

Not sure if a webserver based on the photon will have a speed bottleneck. My system uses a full featured nodejs server which may account for the better speeds.

The one I referred doesn’t seem to work out of the box. Nonetheless, it something I can fix and I’ll make a small tutorial on that. But because I like to update a signal about 10 times a second, suddenly WebSockets came in mind.

By the way if you would like to do fast updates over a local network I suggest UDP. The OSC (Open Sound Control) protocol is pretty straight forward. It supports broadcast as well. But just sending strings over UDP works as well.

The only thing is the UDP is not supported in browsers (it is in wrappers like PhoneGap), so that’s why I started to look in WebSockets.

For my own situation I’ll try the AJAX route first.

Do you have some example code on how you do the time measurement? Or is just setting a timer when you send and you stop it when you get a response?

That is what I found out a lot.

I have been wanting to make some tutorial videos so this might get me started. I will try to make a video of setting up mine. Are you familiar with Cloud9 https://c9.io/ ? It is free but they want a credit card just in case you change your mind and want to spend $19 a month :slight_smile:

P.S. It is only $1 a month for a teacher to invite all of their class’ without the students needing a credit card. Seriously, I get a $1 charge on my credit card every month.

On cloud 9 my students take about 10 minutes to get it working.

  1. On cloud9 make a new node js repository using this link https://github.com/hpssjellis/Particle-Spark-Core-Photon-Websocket-Hack.git

  2. On the command line type and hit enter

npm install

  1. Right click server.js and choose run

  2. open the given link

  3. put that link into the socket.ino file to be flashed to your photon

char server[] = "your-cloud9-webpage-url"; // Node server needs to allow users to have read access to your url

  1. On the loaded webpage enter your id and access token and click the connect link (Using the particle cloud to activate the websocket) D7 should light and stay on

  2. Then click D7 Off, then D7 On (If D7 does not turn off, the websocket is not working.)

I check the speed by clicking the 20 times button (on then off). At 20 ms I can see D7 blink 10 times but at say about 4 ms the blinking gets messed up.

If you have a free cloud9 account this works fine. If you have a paid private cloud9 account you need to share your webserver to the world before it will work (I banged my head a bunch against the computer before figuring that one out.)

Hey @kasper I finally got down to making a photon youtube video. This one is about the websocket hack

Hope it is helpful

My Photon Playlist

3 Likes

Nice tutorial, you explain the steps very clearly.

2 Likes

I agree very well done! Thanks for sharing @rocksetta.

As promised my take on local communication over HTTP/AJAX:

3 Likes

While stuck learning Eagle and Frizting PCB software I took a 2 day break and used the Web Socket Hack to make an Online Multi-User Sheet Music Generator. Fun and irritating at the same time. :slight_smile:

https://musicsocket01-rocksetta.c9users.io/

I guess I better get back to learning about PCB software.

1 Like