node.jsとsocket.ioで簡易チャットを作成する

このエントリーをはてなブックマークに追加

node.jsとsocket.ioで簡易チャットを作成する

本エントリーは「to-R JavaScript Advent Calendar 2015」6日目のエントリー、node.jsとsocket.ioで簡易チャットを作成する方法を解説します。

socket.ioはnode.jsでWebSocketを行うためのライブラリです。

WebSocketとはサーバーからクライアントに対して情報を送信するための技術です。これまでのチャットシステムの多くは、クライアントからサーバーに問い合わせてはじめて新しいメーセージがあるかどうか知ることができ、そのタイミングで新しいメッセージを表示していました。

WebSocketを利用するとサーバーがメッセージを受け取ったタイミングでチャットのメンバーに対して受けっとたメッセージを送信することができます。

インストール

node.jsのサーバーでsocket.ioを利用できるようにしましょう。

前回はnode.jsのExpressでローカルサーバーを構築したのでその続きで行っていきます。

以下のコマンドでsocket.ioをインストールします。

npm install socket.io

サーバーサイド(app.js)

次にapp.jsの中身を以下のように変更します。

var express = require('express');
var app = express();
var http = require('http').Server(app);
var io = require('socket.io')(http);
 
app.use(express.static('htdocs'));
 
io.on('connection', function(socket){
  socket.on('send_message', function(text){
	io.sockets.emit('receive_message',text);
  });
});
 
var port = 3000;
http.listen(port,function(){
	console.log("Expressサーバーがポート%dで起動しました。モード:%s",port,app.settings.env)
});

io.on('connection',...)でsocket.ioのサービスを起動させ、 socket.on('send_message',...)でsocket.onでメッセージを受け取った場合の処理を設定しており、io.sockets.emit('receive_message',text);で受け取ったメッセージを全員に配信しております。

クライアントサイド(index.html)

index.htmlを以下のようにしましょう。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<ul id="messages"></ul>
	<input id="text"><button id="button">Send</button>
 
	<script src="https://cdn.socket.io/socket.io-1.3.7.js"></script>
	<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
	<script>
	var socket = io();
 
	$("#button").click(function(){
		socket.emit('send_message', $("#text").val());
		$("#text").val("").focus()
	});
	socket.on('receive_message', function(text) {
		$("#messages").append("<li>"+text+"</li>")
	});
	</script>
</body>
</html>

これでボタンがクリックされた際にsocket.ioにメッセージを送信し、socket.ioからメッセージを受け取った際にul内に表示するように設定しています。

次回はWebRTCの利用方法について解説します。

関連エントリー

5分でわかるWebRTCの仕組み - html5minutes vol.01

スポンサードリンク

«node.jsのExpressでローカルサーバーを構築 | メイン | WebRTC入門»

このエントリーのトラックバックURL
コメントを投稿