Video Remote Controller with Socket.io

Idea - Using mobile device to control desktop web video player with Play, Pause, Volume Up and Volume Down function. This also can be control by multiple users together.

In this tutorial you may need install NodeJS and npm in your enviroment, if you had it will be start setup the npm package. And we will use Express and Socket.io as a server that connect both platform and sending or receive data from socket.io. If you want to learn more about Socket.io can visit the previous tutorial here.

Installing NodeJS

You may download the NodeJS here, and install the recommended version. You also able to check the nodejs and npm version with -v in your terminal / Command Prompt.

$ node -v $ npm -v

Setup npm package

Before we started, lets create your project folder, so that we can setup or nodejs enviroment in the folder and continues or project. Next lets create our package.json with npm init

$ npm init

After this you need to fill in detail and description of the package.json. You may use Enter key skip to the next, you only will key in for "name","description",and "entry point".

The entry point I will place it as server.js file name, this is the file that we will use to link our client and server file.

This utility will walk you through creating a package.json file. It only covers the most common items, and tries to guess sensible defaults. See `npm help json` for definitive documentation on these fields and exactly what they do. Use `npm install <pkg> --save` afterwards to install a package and save it as a dependency in the package.json file. Press ^C at any time to quit. name: (iochat) version: (1.0.0) description: simple chat app entry point: (index.js) server.js test command: git repository: keywords: author: jam inpie license: (ISC) About to write to /Users/jamjamlong/Documents/Development/iochat/package.json: { "name": "iochat", "version": "1.0.0", "description": "simple chat app", "main": "server.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "jam inpie", "license": "ISC" }

Lastly, once done the setup, you can type 'yes' to sure the details. And this will generate a package.json in your folder.

Package.json

Let's open up the package.json in editor and add in some dependecies that we going to use in this project. In your package.json we will add in after license, you can refer the following code.

{ "name": "iochat", "version": "1.0.0", "description": "simple chat app", "main": "server.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "jam inPie", "license": "ISC", "dependencies": { "socket.io": "*", "express": "*" } }

We inserted socket.io and * for the latest version, and we also inserted express and * for the lastes version as well. With this we had include the pakage that we need to use, next we have to install to our pakage. To do that, back to terminal type npm install to run the installer, it will downloading and create a module in our folder.

$ npm install

We had done with our pakage.json, next we will going to create our server file and client file. I will named it as server.js ( which we created with our npm ), and index.html for our client file.

Server.js Setup

This is the file that we have to place all the module and data that communicate to our client file. By doing this we need to require our express and route. We will declear with variable

var express = require('express'); var app = express(); var server = require('http').createServer(app); var io = require('socket.io').listen(server);

express -

We created server as our launcher, and we will hook our route and client file with it, which is the index.html file.

By using server.listen() function we can park our port to 3000 to start our server. Insert the following code.

server.listen(process.env.PORT || 3000); console.log('Server running...');

Now we can try start our node server with termial by key in node server.js

$ node server.js

Now we can visit our localhost:3000, you may get the console output in your developer debugger window.

Well done !! You had get your node up and running . Next we will going to hook our index.html file link to server.

Displaying Client File

With var app, we able to use it to connect the url route, by app.get() and it content 2 parameter which is require and respone. Therefor, in respone will send the file path with the file name.

app.get('/', function(req, res) { res.sendFile(__dirname + '/index.html'); })