ランサーズ等のサービスを開発・運用する中で得た知識やノウハウを紹介しています。

nodejs

Labels:  JavaScript 投稿者:lukasz

NodeJS, WebSockets and the real-time web

Today our team held first presentation of the series “lancers|conf”.

The idea behind “lancers|conf” is to let each team member prepare presentation once per 2 weeks, share newest IT-related technologies, websites and ideas.

Each presentation should not exceed total 10-15 minutes, where 7 minutes are for presentation and the rest of time is for questions from other team members. Why exactly 7 minutes is important? Einstein said:

“If you can’t explain it simply, you don’t understand it well enough”

Today’s topic was “NodeJS, WebSockets and the real-time web”. In this post I’m going to describe shortly what NodeJS is, who is using it and what for. At the end I will show an example of simple real-time chat build on NodeJS with WebSockets.

In few words, NodeJS is a server side software system, where programs are written in JavaScript.

Main features:

  • Event-driven programming
  • Asynchronous IO
  • Easy scalability

But most of all – NodeJS is extremely fast.

Who is using?

The main purpose of using this technology is

  • Mobile application / websites
  • Real time application
  • Data delivery services
  • HTTP Gateways
  • Games


WebSockets

WebSocket is a technology which provide real-time communication between server and clients. To see it more clearly, let’s check the main difference between standard approach and WebSockets. As an example, let’s imagine a message exchanging service between users.

Standard HTTP

Each time user want to see new message from other users he/she must send a request to the server (reload page by F5). In result, number of requests growing very rapidly.

Standard HTTP + AJAX

In this case, client is sending requests (e.g. every 100 miliseconds) and waiting for response. This is also not efficient.

WebSockets

Client does not need to do anything. If new message appear, server is pushing it directly to the clients. In result, number of request is very low.

Code sample

To create a simple real time chat service like explained above, we need only few lines of code.

Server side (app.js)

// set up environment
var express = require('express'),
    socketIo = require('socket.io'),
    http = require('http'),
    app = express().use(express.bodyParser()),
    server = http.createServer(app);

// start server and open WebSocket
server = server.listen(3000);
var io = socketIo.listen(server);

// Client -> Client communication
io.sockets.on('connection', function(socket) {
    // server is listening to 'broadcast' event
    socket.on('broadcast', function(data) {
        console.log(data);
        // send event with data to all clients
        io.sockets.emit('broadcast', data);
    });
});

Client side (index.html)

var socket = io.connect('http://localhost:3000/');

// listen to 'broadcast' event
socket.on('broadcast', function (data) {
    console.log(data.message);
    // do something
});

// send 'broadcast' event with message
socket.emit('broadcast', { message: 'hoge' });

Pros and cons

Advanteges

  • Very easy to learn (JavaScript)
  • Easy to develop and deploy data delivery service
  • With NodeJS real-time communication (WebSockets, data streaming) become easy

Disadvantages

  • One size does not fit all – building e-commerce site on NodeJS is not a good idea

Links and sources

NodeJS official website
http://nodejs.org

NodeJS on Japanese Wikipedia
http://ja.wikipedia.org/wiki/Node.js

Google V8 Engine
http://ja.wikipedia.org/wiki/Google_V8_JavaScript_Engine

 

ランサーズではサービスを成長させてくれるエンジニア、デザイナーを募集しています!
ご興味がある方は、以下URLよりご応募ください。

PHPエンジニア
Rubyエンジニア
フロントエンドエンジニア
インフラエンジニア
新卒エンジニア
その他採用情報

関連記事

5分で完了!Webサイトに簡単にチュートリアルが作れるIntro.jsの使い方

こんにちは! ランサーズ株式会社の開発部でエンジニアをしております、神庭(かんば)です。 最近、SEOが楽しくて仕方がないお年頃です!   先日、サービスの操作説明をするために、操作マニュアル(チュートリアル)ようなものを作りたいって要望があり、少し …

thumbnail
SEOフレンドリーな無限スクロールの実装方法

飲み物は常温派のota(@purratto)です。自動販売機で常温のものも販売してくれればいいのになあ、と常々思っています。 ランサーズストアでSEOフレンドリーな無限スクロールをjQueryで実装しました。 サンプル向けに一部修正したコードを公開します。参考 …

thumbnail
コールバックスタイルの外部ライブラリなどの関数を redux-saga で使うには

森です。本日の課題とその対処です。 課題 外部ライブラリの関数が、コールバックスタイルのため、redux-saga の自前実装部分との実装の統一感がない。たとえば、navigator.geolocation.getCurrentPosition で現在地を取得 …