【JS】Socket.io を使ってリアルタイムな通信を実現する

Socket.io を使って、ライブコーディングもどきを作った時のメモです

Get started | Socket.IO
Node.jsからSocket.IOを使うための事前知識 - Qiita

Socket.io

リアルタイムで双方向の通信を可能にする技術です。

WebSocketが他のHTTPベースのプロトコルと異なるのはステートフルな通信であるという点です。
HTTP(Ajax,Comet)では通信のたびに新たにコネクションを確立する必要がありますが、WebSocketではその必要がありません。
また、HTTPより軽量なヘッダを扱うことから、通信コストが低い利点もあり、よりリアルタイム性の高いプロトコルであることがWebSocketの特徴です。
Node.js + Express + Socket.ioで簡易チャットを作ってみる - Qiita より引用

インストール

npm install socket.io

GitHub - codemirror/CodeMirror: In-browser code editor

実装メモ(一部抜粋)

const server = http.createServer(app);
// socket.io を定義したファイル指定
require('../socket-server')(server);

// 接続先設定
const socketIO = require('socket.io');

const socket = io.connect('http://localhost:3000');
io.on('connection', function(socket) {
  socket.on('message', function(data) {
    io.emit('message', data); // データを送信
  }) 
})

重要メソッド

socketio.on

socketio.on(<イベント名>, callback) はイベントを検知します。
つまりデータを受信することが可能になります。

socketio.emit

socketio.emit(<イベント名>, data) でイベントを発火します。
つまり、データの送信を可能にします。

socket.join(socket.room)

特定の room に join させるには、 join を使用します。

socket.leave

joinの逆です。
socket.leave(socket.room)

io.to(socket.room).emit

io.to(socket.room).emit('event_name', data)
特定の room に所属するクライアントにのみイベントを送信することが可能になります。
一位のID などを持たせたりすれば、特定の room に入っているユーザーじ対して、何かしらのアクションを行うことが可能になります。

Socket.ioでチャットルームを実現する方法 -- ぺけみさお

ライブコーディング周りメモ

インストール

npm install -S git+https://github.com/Operational-Transformation/ot.js.git

実装

下記の ot.js を追加する
GitHub - Operational-Transformation/ot.js

const ot = require('ot');

const socketIOServer = new ot.EditorSocketIOServer(str, [], data, function(socket, cb) {
  cb(true);
});

socket.on('doc', function(obj) {
  editor.setValue(str);
  cmClient = window.cmClient = new EditorClient(
    obj.str, obj.revision, obj.clients, new SocketIOAdapter(socket)
  );
})