socket.io チュートリアル
socket.ioを使い始める
サーチ…
備考
Socket.IO
は、 realtime
Webアプリケーション用のJavaScriptライブラリです。これにより、Webクライアントとサーバー間のリアルタイムの双方向通信が可能になります。これは、ブラウザで実行されるクライアント側のライブラリとnode.js
用のサーバ側のライブラリの2つの部分から構成されています。どちらのコンポーネントもほとんど同じAPIを持っています。 node.jsと同様、イベントドリブンです。
Socket.IO
主に、同じインターフェイスを提供しながら、フォールバックオプションとしてポーリングを使用するwebsocket
プロトコルを使用します。 webSocket
単なるラッパーとして使用できますが、複数のソケットへのブロードキャスト、各クライアントに関連付けられたデータの格納、非同期I / Oなど、より多くの機能を提供します。
バージョン
バージョン | 発売日 |
---|---|
1.4.8 | 2016年6月23日 |
1.4.7 | 2016年6月23日 |
1.4.6 | 2016-05-02 |
1.4.5 | 2016-01-26 |
1.4.4 | 2016-01-10 |
1.4.3 | 2016年1月8日 |
1.4.2 | 2016-01-07 |
1.4.1 | 2016-01-07 |
1.4.0 | 2015-11-28 |
1.3.7 | 2015-09-21 |
1.3.6 | 2015-07-14 |
1.3.5 | 2015-03-03 |
1.3.4 | 2015-02-14 |
1.3.3 | 2015-02-03 |
1.3.2 | 2015-01-19 |
1.3.1 | 2015-01-19 |
1.3.0 | 2015-01-19 |
1.2.1 | 2014-11-21 |
1.2.0 | 2014-10-27 |
1.1.0 | 2014-09-04 |
1.0.6 | 2014-06-19 |
1.0.5 | 2014年6月16日 |
1.0.4 | 2014-06-02 |
1.0.3 | 2014-05-31 |
1.0.2 | 2014-05-28 |
1.0.1 | 2014-05-28 |
1.0.0 | 2014-05-28 |
インストールまたはセットアップ
まず、 socket.io
モジュールをnode.js
アプリケーションにインストールします。
npm install socket.io --save
基本的なHTTP設定
次の例では、ポート3000で待機するプレーンnode.js
HTTPサーバーにsocket.io
を接続します。
var server = require('http').createServer();
var io = require('socket.io')(server);
io.on('connection', function(socket){
console.log('user connected with socketId '+socket.id);
socket.on('event', function(data){
console.log('event fired');
});
socket.on('disconnect', function(){
console.log('user disconnected');
});
});
server.listen(3000);
Expressによるセットアップ
Expressアプリケーションは、 socket.io
に添付されるhttp
サーバーに渡すことができます。
var app = require('express')(); //express app
var server = require('http').createServer(app); //passed to http server
var io = require('socket.io')(server); //http server passed to socket.io
io.on('connection', function(){
console.log('user connected with socketId '+socket.id);
socket.on('event', function(data){
console.log('event fired');
});
socket.on('disconnect', function(){
console.log('user disconnected');
});
});
server.listen(3000);
クライアント側のセットアップ
クライアント側の実装については、上記のHello Worldの例を参照してください。
"こんにちは世界!"ソケットメッセージ。
ノードモジュールをインストールする
npm install express
npm install socket.io
Node.jsサーバー
const express = require('express');
const app = express();
const server = app.listen(3000,console.log("Socket.io Hello Wolrd server started!"));
const io = require('socket.io')(server);
io.on('connection', (socket) => {
//console.log("Client connected!");
socket.on('message-from-client-to-server', (msg) => {
console.log(msg);
})
socket.emit('message-from-server-to-client', 'Hello World!');
});
ブラウザクライアント
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World with Socket.io</title>
</head>
<body>
<script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
<script>
var socket = io("http://localhost:3000");
socket.on("message-from-server-to-client", function(msg) {
document.getElementById('message').innerHTML = msg;
});
socket.emit('message-from-client-to-server', 'Hello World!');
</script>
<p>Socker.io Hello World client started!</p>
<p id="message"></p>
</body>
</html>
上記の例では、socket.ioライブラリへのパスは/socket.io/socket.io.jsとして定義されてい/socket.io/socket.io.js
。
socket.ioライブラリを提供するコードを記述していないにもかかわらず、Socket.ioは自動的にそれを行います。