Node.jsで簡単なWebRTC（リアルタイムチャット）を実装

管理者

7年前

現在、サーバー側で動作するするJavaScript「Node.js」を勉強中。
練習でリアルタイムで会話ができるチャットシステム（WebRTC）を実装。
今回はとりあず実装しただけですので、npmでインストールしたモジュールがどのような役割を果たしているかは把握していません。

Node.jsとその他を準備する

WebRTCに必要なものはNode.jsと以下の3つです。
Linuxサーバーで実装していきますので、npmを使って全てパッケージをインストールします。

npm install socket.io
npm install express
npm install forever

Node.jsのインストール方法はこちらを参考に。

後は、サーバー側で動作させるJavaScriptファイルと、WEBブラウザ側でチャット画面を表示するためのHTMLファイルです。
ここでは、[chat.js]と[index.html]というファイルを作成します。

WebRTCを構築

まず、Linuxサーバー側でWebRTCの要であるチャットのやり取りを処理する[chat.js]を作り、次にチャットの内容を入力したり表示する[index.html]を作成します。

chat.js

ここでは、上記のnpmでインストールしたNode.jsのパッケージ（socket.ioとexpress）を使って、3000番ポートでHTTP接続してWebRTCを実装します。

app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);app.get('/', function(req, res){
  res.sendFile(__dirname + '/index.html');
});io.on('connection', function(socket){
  socket.on('chat message', function(msg){
    io.emit('chat message', msg);
  });
});http.listen(3000, function(){
  console.log('listening on *:3000');
});

index.html

そして、クライアント側（WEBブラウザ）でチャットを入力・表示するための画面を作ります。
ここでは、入力フォームや表示の他に、JavaScriptでメッセージをサーバ側に送ります。

<!DOCTYPE html>
<html>
<head>
<title>WebSocket Chat</title>
</head>
<body>
<form action="">
<input id="sendmsg" autocomplete="off" /><button>Send</button>
</form>
<ul id="messages" style="list-style-type: decimal; font-size: 16px; font-family:: Arial;"></ul>
<script src="/socket.io/socket.io.js"></script>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script>
  var socket = io();
  $('form').submit(function(){
    socket.emit('chat message', $('#sendmsg').val());
    $('#sendmsg').val('');
    return false;
  });
  socket.on('chat message', function(msg){
    $('#messages').append($('<li style="margin-bottom: 5px;">').text(msg));
  });
</script>
</body>
</html>

さぁ！WebRTCを実行するには以下のコマンドを実行します。
ただし、一時的な実行になりますので、SSHクライアントを閉じたら停止してしまします。

node chat.js

そこで、永続的に実行する場合はforeverを使います。

forever start chat.js

完成したWebRTCは、以下のようにポート3000で開きます。

http(s)://[example.com]:3000

WebRTCの完成イメージ

出典：[Node.js <-> Node.js] Socket.ioでサーバー間通信メモ – Qiita

このように、同じWebRTCの画面を開いたユーザー同士が入力したメッセージは、お互い同じメッセージが表示されます。

Original:https://minory.org/node-js-webrtc.html
Source:Minory
Author:管理者