DIY Remote Camera using Raspberry Pi, Pi Camera, and Socket.IO

The Client

Now that our socket server is listening to connections, let’s create a client that would connect to that server. Our client will be a simple HTML page. To serve this HTML page, we need to create a node.js server but you are free to use any server of your choice.

var express=require('express');
var app=express();
var http=require('http').Server(app);
var path=require("path");

app.use(express.static(path.join(__dirname,'assets')));
app.get('/',(req,res)=>{
    res.sendFile(__dirname+'/client.html');
});

http.listen(3000,()=>{
    console.log("Server running");
})

Here, we are serving the client.html file whenever the root endpoint is called and are using the static middleware to serve static files. In the root directory of your client app, create a folder called assets. All your static files should go here. Create an HTML file named client.html in your root directory.

We need to load the socket.io module into our webpage and the easiest way is to use a CDN link. Add the following script tag to the header of your webpage.

        <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js"></script>

Now, open another script tag and connect to our socket server by specifying its URL.

var socket=io("http://localhost:5000/camera");

Here, camera refers to the namespace. Now, run the server and load the webpage. In the console of your socket server, you should see a message similar to the one below.

You have connected your client to the server!

Inter-socket communication

Now, we need to send a message to the server from the client. To do so, we need to emit an event from the client and have the server listen to that event. Let’s call this event take. On the socket server, let’s create a listener.

socket.of('camera').on("connection", io=>{
    console.log("Client connected!",io.id);
    io.on("take",(mes, fn)=>{
        console.log("Picture request ", mes);
        fn(“Hello from server!”);
    })
})

The socket connection event passes the client socket as an argument into the callback function. We need to listen to the take event on that socket. The on method listens to the take event which is specified as the first argument. The second argument is a callback function into which the message received and another callback function are passed as arguments. This callback function is defined by the client and can be called by the server anytime. Now, whenever we receive a message, a message will be printed in our console and the callback function will be called with another message passed as the argument.

Let’s try to emit an event from the client. We are going to create a button, which when pressed would emit this event.

<button >

var socket=io("http://localhost:5000/camera");

function requestPicture(){
                socket.emit('take','picture',(msg)=>{
                    console.log(msg);
                });
            }

socket.on("connect", () => {

    console.log("Connected to the server!");

})