Connecting Arduino to Internet using Websockets.
Tags: node, arduino, webdev, softwareengineering
Published: 2023-07-26 12:28:26


In this article I will be sharing a recent project that I made using arduino. 

Few years back, I made several arduino projects that used wireless communication using IR sensors and bluetooth. Though they worked perfectly but the only limitation was that the communcation range was not very great.

I was always fascinated by controlling the microcontroller using internet, while researching I found that we need hardwares like Ethernet sheild, routers and static IP for client-server communication to make arduino webserver. 

Recently, I learnt about websocket protocol and socket.io library, and thought to connect my arduino with the internet and control its sensors.

Since I had no ethernet sheild and router, it was impossible for me to establish direct communication between a browser and arduino. To resolve this issue, I decided to communicate with the arduino indirectly, ie via a remote server hosted on Render.com.
In this solution, the client will establish websocket connection with the remote server. At the same time my arduino which is connected to nodejs server on localhost sending data via serialport, will also establish websocket connection with that remote server.

The scenerio looks like this:

 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e9zqlxsduioq7gv5zh0m.png)

For websocket connection, I used one of the popular libarary called Socket.io. It is a great libary for making realtime projects, and it is very easy to use too. 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/shh5wk8afspygg343gcm.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lrg88j4wsu5id3kfkefj.png)

In my project, browser and  nodejs localhost server were clients and the remote server was the main socket server.

Since, I had established the realitime connection between the local machine and browser, I had to connect the arduino with the local machine so that it can control the sensors. 
In arduino we have the access to write on serial port. ie `Serial.println("turn on led")`. We can access serial port in nodejs using a npm library called `serialport`. With that, our whole problem is solved. Let me explain:

We will send emit `lightOn` message from the browser, this message will be catched by the remote server, then it will forward this message to the local nodejs server (remember, this local nodejs server is already connected to the remote server, because it is client with respect to it, and it had already established the connection). 
The local nodejs server will read the message, and accordingly write commands to the serial port. Since the arduino is already connected, it will read serial port and take necessary steps with the sensors. After performing tasks on the sensors, arduino will write acknowledgement signals to the serial port.
Since the local nodejs server is continuously reading the serial port, as soon as it gets the acknowledgement, it will emit socket packet to the remote server conforming that the command has been fullfilled. The remote server will in turn report to the browser about the fullfillment of the command and the brower will update its UI accordingly.


Below is the detailed diagram of the process involved in this process.

[diagram link](https://viewer.diagrams.net/?tags=%7B%7D&highlight=0000ff&edit=_blank&layers=1&nav=1&title=draw.io.drawio#R7RzbcqM49mtc3f2QFCCuj51kdntru7enkpnqnactGWSbCUYeEInTX79HIG5CxNgBnM2mq9qBgxDi3G9iga63%2B78neLf5RgMSLQwt2C%2FQzcIwdNN24A%2BHPBUQV9cKwDoJAzGoBtyFP4kAlsOyMCBpayCjNGLhrg30aRwTn7VgOEnoY3vYikbtp%2B7wmnQAdz6OutAfYcA24i0srYZ%2FIeF6Uz5Z18SVLS4HC0C6wQF9bIDQLwt0nVDKiqPt%2FppEHHklXor7%2FtZztVpYQmI25AbDvL81%2Fmn%2F%2BZP9Zbr2Pv7Pl99uLgR1HnCUiRcWi2VPJQZg3Tt%2B6GdL%2BHP1uAkZudthn8MegegA27BtBGc6HC5pFgck%2BLqsANi%2FXycc%2Bj1jURgTAQ9wcv8dpgkZ5wztUrPaQCOH8pGrMIquaUSTfD1ohQMH%2BwBPWULvSePK0rQtzYQr4qVIwsi%2BF1t6RQNgXkK3hCVPMETcYJUUFnyrO%2BL8seYC3bAK2KbBAa4YhwXjraupa9rAgSDPEaRyD5PqAG1wuitEZBXuSaDA7Gpl%2BByz6wQHISCqdS3wbFuF9cBe2pY9DtaR2ca6pXWxXiJ4FqTrSIF1O2KcV8MHOFyz%2FM0L0DKRIfDQ1jiJYIApJtEoCtcxHEdkxa9wbIagjT4L8DYMAn7zVULS8Cde5hNpcL6jYczyt7euFtYNnyljNC30qd6hW0y5ILYYQIBGoKKpSVQs5aRBRUNBRTQZFa1eKm70kjjfcMoIEFC7I8kDP6goWI8pgVnUoqP9V0Zz%2BtMkIMmFX2D0c%2F7E5OPFRRP%2BqZhG3CFPHIUjT3xLtpQRuOEb9jdc%2B9avxZ818dO%2FUMBpADfQGH5uCZiG5NKn23lX8S%2FwSv5MOf%2BRZUr9e8Jy%2ByzIncrk7q4IgJzig4V4qKyl3NTFawBY9dlvFNT2zYWh9RhbCqtdRbknsQFtQGKuDQqrK3TBCCJs21bb%2FKGuIkaaQoZ1YzIhVvkqshBfR9xuvRHZLV7mA%2BfcJfdkD3DpBLoDg6O95dojwAzn1M%2FptCS5P0sf41K02SbkywzIQ%2BjPrGNKkms%2B5isJ0zQjxe0hzdI8NNhucRzAoY23XILiZbprS%2Fe7yIPMobbVNt2zi3w5cUPkmypcxHwh58DBjpUP6ABBOodrlVCG89UCra2RqIbsNtWQ1fW1dHNOZ6t8hykDFdcnfYEKwRCPKAOVpWuZY6HdtV9ZoFIieUKs%2Bz6xVisVZpGNPBRMg9kqYXQ2zJqHMQvThLt0QHpEQqltOrbrcDiVom3%2BT4lq3UTWSDmOCrUC1Z7XRbVKdZiToVoVp70NVLuvDdX2dKjmCHXdqRWFZ70ylKIBKhgi4M88K80dkQinaei3Mdn26gATydO%2F%2BcmlVZ7%2BIUbmJzf75sibp5Y3SIJOalvCLfjtOFkTdtCudInQQLKlQHIJS0gELs9Dex0qzIsn%2FMp9rYbYoB4al1OkNEt8Iu6q6dedSJY%2FmQsKRHQmyhmheu0X8IYqjzgJb2gj8ca5SO4Zkv0%2FleSec4B3pib5EL9BRfIUFsaO4IRXT9E%2BN%2BNoiuraZSlIfdwxNVH7M8ncr1CmNviFiyJc5HkNQ9%2FtlYmMOxKnNEkbGYhiytFzEMNDYZXdHz3x4EqCqmtm15LbCv6cLIRFA2pto4gu2YesocPh7I%2FGlVqD85NSgU%2FvFBTyeNApGOI9nFXxuJ4n6wtHs050ILpz2Uiaa2LdU0rFS3QP6tE9n5MgC2N6uu55Bem1EVSRJ9WfXUXZQ1flQCcLKkxVNk2uenylgGgYVBW6BpQwd4qMdwfWTIHX6fsC8qORiY3LB6cRfsiLA2IBWpLFMc93izpBxFe6oSm7PFgkENn9IsebFxEZ5T8bPn%2Bneqc9hHmBolxUevIDcCkKWpYWK4dnhDl%2BdzRhz04rVQ0GYXo0s%2F56SwtyqG4qmmmUFn660oI1wDv3M%2BCtoDKtc0RnlUPQ5w44RuUq5De55dVfgUkBNVz3jm3unXMacVvyDpGsao%2BIHloTVSn7A%2BYbqI6fGsOEvRq%2BYF17dl22J42X%2B%2Fik8Y6mRkjveP3Z8XBQvOGovoqlSi%2BKJilZHQ51XnSjx3kh25AVQyLOft%2FjXjemAi%2BP0L%2BvwLWZpHLotVs8kKOoHKp8ncnCLqvb4fGjXe4FdEVph2TpY7iNcHxCotpbOXmla9qKliTgql4aQ1lYf86rFI%2B7Bd8Fx%2BuI1M%2BzJIFXtq6qNLZMWBwBv8eYkStu29IOfUfQE6XRV%2BiJF%2FfpaJL%2B8HrUx2SdKbnHKyum4S0oo6%2Bn1pPCx%2F3aUZfHNsLUXo9%2BWPqk3ta%2B7uMXdhg%2Fo1p6RVTKOSvyT%2FqsCSi7P%2Bp7i2JxS9IdjdOZG8dqcfDzFrLfdwHout%2F%2F8S4OcglG4RjMKw7GQMcAFnBVBexFtD6G25CndcXeJFM7lx%2Bhd9SUKow%2BukPvjTgS%2FRs13pTG7FjuM%2FoTtZhdPiYgQB8%2F5Pqcxh8%2BnUuTH2NQ3oYqL3TjUFWu6g5VqfLJ8tn2gMTAAD%2F1YPx%2BgGCNgBo546jnTt5nqLacDtf9OyZOT8K4Pcov4hn0N5Z2GYErPCn4V3WpzcsUp9a2h%2BS6XWQvmiXpS81EiwMZb352evL6YAn6rMlrOedsntz6Iid9ZRdrpOS1KxVAkTVDstj2jrEJ%2FSZ%2BRKNgWOOIvyPZX6TYJ6DcnjGZ%2FJdWaTz5HyqsZ6sgSUJYVRqPFUJ5X3NHmkcSQksWdmcGIXQGbNs51S40bQIYCcP5f7YJ1Q6tl9oEU5Mmmrmn2elmZRpqe5Ittr1e6unB%2FICqYm968G14uVMUF03Z7qlyiLNuS3T6E0QnB0O97XT6S5hk8LabQxv2AkzcVc82SYdgm2iqnITtu2S5GocNkNz4o%2FyMwJxcoGr7mYoLjHcuKBwwU%2Bo00LrKYF4u6O%2FiH58L0DsXFKHlgJ3q83LBBD1KvVxgvnNB4URLFgEpvg01Lxc8%2F1kZBcn5R%2BwuyrXlRIe1Waf5rTL79JWWqs7uC%2FhfNetrzSrodeNrGFpVGCp%2BF%2FzjS9XHXK7pdpvF4GQWgw%2FxZbN3%2FJz%2B7Bj%2BiNzz1nVHqm2DqtBv%2FI%2F6vXxPh2718AyQOWuQWauUW1KOYBuI2NebRafFXft4%2Ff0b%2BtTLG%2F9jYY03UlTjSF%2FFsocW4E%2FgHzitvw1ahOz1F1bRL%2F8F)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hnuzvhvub0tmldol5gcz.png)