Creating a realtime chat app with Socket.io and NativeScript

Since I started learning and developing with NativeScript creating a realtime app has always been on my todo list also because I believe most apps should be realtime so today we'll be using my socket.io plugin for nativescript to create a chatroom app with no further delay lets jump into some coding.

I'm going to assume you already have nativescript installed if not you can check this link

Create chat-server

mkdir nsChat-server  
cd nsChat-server  
touch app.js  
npm init -y  

Install the chat-server dependencies
npm install express socket.io --save

Update app.js

'use strict'  
var express = require("express")  
var app = express();  
var server = require('http').createServer(app);  
var io = require('socket.io')(server);  
app.get('/', function (req, res) {  
    res.end();  
})  

var numUsers = 0;  
var messages = [];  
var userList = [];  
io.on('connection', function (socket) {  
    var addedUser = false;  
    socket.on('add user', function (data) {  
        if (addedUser) return;  
        numUsers++;  
        addedUser = true;  
        socket.username = data;  
        userList.push(socket.username);  
        socket.emit('login', {  
            numUsers: numUsers,  
            userList:userList  
        })  
        socket.broadcast.emit('user joined', {  
            username: socket.username,  
            numUsers: numUsers  
        })  
    })  

    socket.on('new message', function (data) {  
        messages.push(data);  
        socket.broadcast.emit('new message', data);  
    })  

    socket.on('getMessages', function () {  
        socket.emit('getMessages', messages);  
    })  

    socket.on('disconnect', function () {  
        if (addedUser) {  
            numUsers--;  
            for(let i = 0; i < userList.length;i++){  
                if(socket.username === userList[i].username){  
                    userList.splice(i,0);  
                }  
            }  
            socket.broadcast.emit('user left', {  
                username: socket.username,  
                numUsers: numUsers  
            })  
        }  
    });  
});  

server.listen(3000)  

Create {N} project

Below is a simple command to create a nativescript app if you would like more customization check out nativescript-cli on github

tns create nsChat  
cd nsChat  
tns install typescript  
tns platform add android  
tns plugin add nativescript-socketio  
npm install moment ---save  
cd app  
touch login.ts login.xml  

Update app.ts

import moment = require("moment");  
application.resources["dateFromNow"] = function(date){  
    return moment(date).fromNow();  
};  
application.start({ moduleName: "login" });  

Update app.css

.messages{  
padding:16;  
}  
ListView{  
 background-color: white;  

}

Update login.ts

import {Observable} from 'data/observable';  
import {SocketIO} from 'nativescript-socketio';  
import {Page} from 'ui/page';  
import frameModule = require('ui/frame');  
let socketIO;  
const server = 'http://192.168.56.1:3000';  
let page;  
let pageData = new Observable({  
  item: '',  
  username: 'Osei'  
});  

export function navigatingTo() {  
  socketIO = new SocketIO(server, {});  
  socketIO.on('login', function (data) {  
    frameModule.topmost().navigate({ moduleName: 'main-page', context: { username: pageData.get("username"), socket: socketIO.instance } })  
  })  
}  
export function pageLoaded(args) {  
  page = <Page>args.object;  
  page.bindingContext = pageData;  
}  
export function join(args) {  
  socketIO.emit('add user', { username: pageData.get("username") });  
}  

<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded" navigatingTo="navigatingTo">  
<StackLayout>  
<TextField hint="Enter username" text="{{ username }}" />  
<Button text="Join" tap="join" visibility="{{ isSet }}"/>  
</StackLayout>  
</Page>  

Update main-page.ts

import {Observable} from 'data/observable';  
import {ObservableArray} from 'data/observable-array';  
import {Page, NavigatedData} from 'ui/page';  
import frameModule = require('ui/frame');  
import {SocketIO} from 'nativescript-socketio';  
let socketIO;  
import view = require('ui/core/view');  
let pageData: any = new Observable({  
  list: new ObservableArray(),  
  textMessage: '',  
  currentUser:''  
})  
let page;  
let context;  
export function navigatingTo(args:NavigatedData){  
   page = <Page>args.object;  
  context = page.navigationContext;  
  pageData.set("currentUser",context.username);  
 socketIO = new SocketIO(null,null,context.socket);  

socketIO.on('new message', function(data) {  
  pageData.list.push(data)  
})  

socketIO.on('disconnect', function() {  
  frameModule.topmost().navigate('login')  
})  

socketIO.on('getMessages', function(data) {  
  if (data.length > 0) {  
    if (pageData.list.length !== data.length) {  
      var messages = data;  
      for (let i = 0; i < messages.length; i++) {  
        pageData.list.push(messages[i])  
      }  
    }  
  }  

})  
}  
export function pageLoaded(args: NavigatedData) {  
  page.bindingContext = pageData;  
  socketIO.emit('getMessages');  
}  
export function sendText() {  
  let data = {  
    username: context.username,  
    message: pageData.get("textMessage"),  
    timeStamp: +new Date()  
  };  

  socketIO.emit('new message', data)  
  pageData.list.push(data);  
  pageData.set("textMessage", "");  
}  

export function logout(){  
    socketIO.disconnect();  
}

<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded" navigatingTo="navigatingTo">  
<Page.actionBar>  
<ActionBar>  
 <ActionBar.actionItems> 
<ActionItem tap="logout" text="Logout"/>  
 </ActionBar.actionItems>  
</ActionBar>  
</Page.actionBar>  
 <GridLayout columns="2*,*" rows="auto, *">  
 <TextField hint="Enter text" text="{{ textMessage }}" row="0" />  
 <Button col="1" text="Add" tap="sendText" row="0" />

 <ListView id="lv" items="{{ list }}" colSpan="2" row="1">  
 <ListView.itemTemplate>  
 <GridLayout columns="*,*,*" class="messages">  
 <Label text="{{ username }}" />  
 <Label text="{{ message }}" col="1" />  
 <Label text="{{ timeStamp | timeFromNow}}" col="2" /> 
</GridLayout>  
</ListView.itemTemplate>  
</ListView>  
</GridLayout>  
</Page>  

Start chat-server

cd nsChat-server  
node app  

Start app

cd nsChat  
tns run android  

Chat away :)