We get it. Mobile is here to stay. It’s one of the most in-demand tech skills for freelancers today. If Pokemon Go and other mobile applications don’t give you an idea of its rising popularity, then maybe it’s time to change careers. We’re just kidding! But really, adding mobile chat apps to your skill set will only strengthen your tech portfolio. We promise.
Step 1: Set Up An Environment
When it comes to creating mobile chat apps, the first thing to do is to get Node.js installed on your system. NodeJS is very easy to install. The installers are available on https://nodejs.org/en/ depending on your OS.Step 2: Getting Started
Within your app directory, create a package.json file with the following content:{
"name": "ChatAppWithSocketIO",
"version": "0.0.1",
"dependencies": {
"express": "~4.13.1",
"socket.io": "latest"
}
}
A package.json file contains an overview of your mobile chat apps. There are a handful of available fields and the dependencies section describes the name and version of the modules you’d like to install. In this case, we can accept the Express 4.13.1 version and the latest version of Socket.IO. You can list as many dependencies as you want in this section.
Now, instead of installing each dependency separately, we can run a single command and install all of them at once.
$ npm installWhen you run this command, npm will look into the current folder for a package.json file. If it finds one, it will install every dependency listed. Wait for express and socket.io to be installed and then create an app.js file to set up our application.
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
app.get('/', function(req, res) {
res.sendfile('index.html');
});
io.on('connection', function(socket) {
console.log('An user have connected to application!');
socket.on('disconnect', function() {
console.log('An user have disconnected from application!');
});
});
http.listen(8080, function() {
console.log('Server running at http://localhost:8080');
});
Populate index.html with the following:
<!doctype html>
In the directory of each application, run command and then hit http://localhost:8080 on the browser.
$ node app.jsServer running at http://localhost:8080 A user has connected to the application!
Step 3: Emitting Events
The main idea behind Socket.IO’s mobile chat apps are that you can send and receive any events you want, with any website data you want. Any objects that can be encoded as JSON will do so, and the binary data is supported too. The scripts section in index.html should now look as follows:And in app.js we will log out the chat message event:
io.on('connection', function(socket) {
console.log('An user have connected to application!');
socket.on('onChat', function(msg) {
console.log(msg);
});
});
Next, run the app again and try to text something and press ‘Send.’ The message you input will be a login terminal:
$ node app.jsServer running at http://localhost:8080 A user has connected to the application! Hello, world! Now, your message after you submit is already emitted to the server. In order to send this message to everyone, Socket.IO gives us the io.emit:
io.emit('some event', {
for: 'everyone'
});
If you want to send a message to everyone except for a certain socket, we have the broadcast flag:
io.on('connection', function(socket) {
socket.broadcast.emit('hi');
});
In this case, for the sake of simplicity, we’ll send the message to everyone, including the sender. Let’s implement the ‘on connection’ function in app.js:
io.on('connection', function(socket) {
console.log('An user have connected to application!');
socket.on('onChat', function(msg) {
io.emit('onChat', msg);
});
});
On the client side, when we capture a chat message event we’ll include it in the page. The total client-side JavaScript code in index.html now amounts to:
And there you have it. This is what your mobile chat apps should look like:
