Socket.IOの使い方
WebRTCの開発でも使うNode.jsのライブラリSocket.IO。その使い方をまとめてみました。
インストール
Node.js+Expressで動かす場合になります。
$ npm install socket.io
$ npm install express
サーバー <-> クライアント間の通信
サーバー側のサンプルソース
const path = require('path');
const http = require('http');
const express = require('express');
const app = express();
const port = 8000;
const server = http.createServer(app).listen(port, () => {
console.log('server start. port=' + port);
});
const io = require('socket.io')(server);
io.on('connection', socket => {
console.log('socket.id:' + socket.id);
// 切断時に発生します.
socket.on('disconnect', reason => {
console.log(`disconnect: %s, %s`, reason, socket.id);
});
});
// expressで静的ページにアクセスする.
app.use(express.static(path.join(__dirname, 'static')));
変数
ioの定義(代入)方法は一例で、他の指定もあります。
クライアントとの通信は上記のコールバック関数内に記載します。socketは接続された各クライアントになります。
どちらの方向でも、socket.emit(eventname, data)でイベントを送信し、socket.on(eventname, callback), socket.on(eventname, callback(data))でイベントを受信します。
サーバーがクライアントからのイベントを受信する
クライアントからのイベントをsocket.on(eventName, callback)で受信します。
socket.on('イベント', data => {
//
});
部屋に入室する
socket.join('部屋名');
部屋から退室する
socket.leave('部屋名');
サーバーからクライアントへイベントを送信する
クライアントへのイベント送信は以下のような方法で行います。
クライアント自身向け
socket.emit('イベント', 'パラメータ');
自分以外の全クライアントにイベントを送信する
socket.broadcast.emit('イベント', 'パラメータ');
自分を含む全クライアントにイベントを送信する
io.emit('イベント', 'パラメータ');
特定のクライアントにイベントを送信する
送信先のソケットIDは相手側のsocket.idで取得できます。
io.to(送信先のソケットID).emit('イベント', 'パラメータ');
特定の部屋のメンバーにイベントを送信する
自分にも送られます。
io.to('部屋名').emit('イベント', 'パラメータ');
クライアントのサンプル
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Socket.io Client</title>
<script src="/socket.io/socket.io.js"></script>
<script>
let socket = io('http://localhost:8000');
// サーバーに接続できた場合.
socket.on('connect', () => {
console.log('connect success');
});
// サーバーから'server-send'を受信.
socket.on('server-send', data => {
let message = data.message;
document.getElementById('receive-message').value = message;
});
function sendMessage() {
let message = document.getElementById('send-message').value;
socket.emit('client-send', {message: message});
}
</script>
</head>
<body>
<p>
<input type="text" name="sendmessage" value="" id="send-message" style="width: 200px;">
</p>
<p>
<button type="submit" id="send-message-button" onclick="sendMessage();">送信</button>
</p>
<p>
<input type="text" name="receivemessage" value="" id="receive-message" style="width: 200px;">
</p>
</body>
</html>
サーバーに接続する
// サーバーに接続.
let socket = io('http://localhost:8000');
socket.on('connect', () => {
// サーバーに接続できた場合.
console.log('connect success');
});
クライアントがサーバーからのイベントを受信する
サーバーからのイベントはsocket.on(eventName, callback)で受信します。
socket.on('イベント', data => {
//
});
クライアントからサーバーへイベントを送信する
サーバーへのイベント送信はsocket.emit(eventName[, args])を使用します。
socket.emit('イベント', 'パラメータ');
