簡易チャットアプリの作成
Node.js + Express + Socket.ioを用いて簡易チャットアプリを作る。
はじめに
最近、Node.jsを勉強し始めたので、解釈が間違っているとこが多々あると思います・・・
コメントで指摘していただけるとありがたいです。
クライアントとサーバーについて
自分なりの解釈をまとめてみる
-
サーバー(server)
- 何かを提供するor何かを使える状態にしてくれる
= （食べ物、料理などを）提供する人[料理人]
- 何かを提供するor何かを使える状態にしてくれる
-
クライアント(client)
- 何かを提供される人or何かを使える状態にしてもらう
= （食べ物、料理などを）提供してもらう人[お客さん]
- 何かを提供される人or何かを使える状態にしてもらう
クライアントとサーバーのやり取りの流れについて
- クライアントがサーバーにリクエストを送る
＝ お客さんが料理人に料理の注文を頼む - サーバーがリクエストを解析、処理してリクエストの答えを作る
＝ 料理人が料理の注文を聞いて必要な食材を食べれるように調理して料理を作る - サーバーがクライアントにレスポンスを返す
＝ 料理人がお客さんに作った料理
を持っていく
コード
1.GETリクエストが来たら、Hello Worldの表示
var express = require('express');
var app = express();
var http = require('http').Server(app);
const PORT = process.env.PORT || 7000;
app.get('/' , function(req, res){
res.send('hello world');
});
http.listen(PORT, function(){
console.log('server listening. Port:' + PORT);
});
-
'/'←リクエストURIにGETリクエストして来たら- リクエストURI・・・クライアントからサーバにリクエストする対象(サーバー内に保管されているリソース)
- GETリクエストを処理してレスポンス(Hello world の表示)
//GETリクエストの処理 app.get(リクエストURI,コールバック関数)
app.get('/' , function(req, res){
res.send('hello world');
});
2. HTMLファイルをレスポンス
変更点
app.js
app.get('/' , function(req, res){
res.sendFile(__dirname + '/index.html');
});
使用するHTMLファイルは以下の通り
index.html
<!DOCTYPE html>
<html>
<head>
<title>chat</title>
</head>
<body>
<h1>Socket IOを使う</h1>
</body>
</html>
こうすることで、HTMLの内容をローカルサーバーに表示する
3. Socket.ioの使用（クライアント→サーバー）
app.js
/*(省略)*/
const io = require('socket.io')(http);
/*(省略)*/
io.on('connection',function(socket){
console.log('connected');
});
/*(省略)*/
index.html
<!DOCTYPE html>
<html>
<head>
<title>socket.io chat</title>
<script src="/socket.io/socket.io.js"></script>
</head>
<body>
<ul id="messages"></ul>
<form>
<input id="input_msg" autocomplete="off" /><button>Send</button>
</form>
<script>
var socket = io();
$(function(){
$('#message_form').submit(function(){
socketio.emit('message', $('#input_msg').val());
$('#input_msg').val('');
return false;
});
});
</script>
</body>
</html>
Socket.ioの関数の解説
io.on('connection',function(socket){ ... });
サーバーとクライアントとの接続が確率すると、
- クライアント：'connect'イベント
- サーバー：'connection'イベント
が発生する- サーバのconnectionイベントが発生するとコールバック関数の
function(socket){ ... }が呼ばれる
- サーバのconnectionイベントが発生するとコールバック関数の
4. Socket.ioの使用（サーバー→クライアント）
次に、サーバーからクライアント全員にデータ送信する処理を追加する
app.js
io.on('connection',function(socket){
socket.on('message',function(msg){
console.log('message: ' + msg);
io.emit('message', msg);
});
});
- 受け取ったメッセージをクライアント全員に送信
io.emit('message',msg)
を用いることで実装可能
その次に、クライアント側でサーバから受け取った情報を表示する
index.html
<!-- クライアント側の処理を記述する -->
<body>
<ul id="messages"></ul>
<form id="message_form" action="#">
<input id="input_msg" autocomplete="off"/><button>Send</button>
</form>
<script>
var socketio = io();
$(function(){
$('#message_form').submit(function(){
socketio.emit('message', $('#input_msg').val());
$('#input_msg').val('');
return false;
});
socketio.on('message',function(msg){
$('#messages').append($('<li>').text(msg));
});
});
</script>
</body>
コード解説
$("A").B(){ .. }
- AをBする
$('#messages').append($('<li>').text(msg));
- $('対象要素').append('追加したい要素');
- $('<li>').text(msg);
= <li>（msgの内容）<li>
- メッセージIDにliタグとliタグのメッセージを追加する
$(function(){ ... }
はページ読み込みが終わって、DOMが構築された時点でfunction()内が実行される
参考
Node.js + Express + Socket.ioで簡易チャットを作ってみる
超絶初心者のためのサーバとクライアントの話
HTTPとPOSTとGET