1. はじめに
最初は Socket.IO の公式 Web サイトです: http://socket.io
公式ウェブサイトは非常にシンプルで、APIドキュメントはなく、参考用の簡単な「使い方」のみです。なぜなら、Socket.IOは公式Webサイトと同じくらいシンプルで使いやすく、使いやすいからです。
それでは、Socket.IO とは一体何なのでしょうか? Socket.IO は、クライアント側の js とサーバー側の nodejs を含む WebSocket ライブラリです。その目的は、さまざまなブラウザーやモバイル デバイスで使用できるリアルタイム アプリケーションを構築することです。 WebSocket、AJAX ロングポーリング、Iframe ストリーミングなどのさまざまな方式からブラウザに応じて最適な方式を自動的に選択してリアルタイム ネットワーク アプリケーションを実装するため、非常に便利で使いやすく、サポートされているブラウザは次のとおりです。 IE5.5 程度であれば、ほとんどのニーズを満たすことができるはずです。
2. インストールと展開
2.1 インストール
まず、node.js 環境では、インストールは非常に簡単です。
という一文だけです。
npm installsocket.io
2.2 Express を組み合わせてサーバーを構築する
express は、HTTP サーバーを構築するときによく使用される小さな Node.js Web アプリケーション フレームワークです。そのため、Socket.IO と Express を例として直接使用して説明します。
var Express = require('express')
、app =express()
、サーバー = require('http').createServer(app)
、io = require('socket.io').listen(server);
サーバー.listen(3001);
Express を使用しない場合は、socket.io/#how-to-use を参照してください
3. 基本的な使い方
これは主にサーバー側とクライアント側の 2 つのコードに分かれており、どちらも非常に単純です。
サーバー (app.js):
//上記のコードを続けます
app.get('/', function (req, res) {
res.sendfile(__dirname '/index.html');});
io.sockets.on('接続', 関数 (ソケット) {
ソケット.emit('ニュース', { hello: '世界' });
socket.on('その他のイベント', function (data) {
console.log(データ);
});
});
まず、io.sockets.on 関数は、クライアントが接続を開始するためのイベントとして文字列「connection」を受け取ります。接続が成功すると、socket パラメーターを指定したコールバック関数が呼び出されます。 socket.IO を使用するときは、基本的にこのコールバック関数でユーザーのリクエストを処理します。
ソケットの最も重要な関数は、exit 関数と on 関数です。前者はイベントを送信 (発行) します (イベント名は文字列で表されます)。デフォルトのイベント名もいくつかあります。その後にオブジェクトが続き、ソケットに送信されたコンテンツを表します。後者はイベント (イベント名は文字列で表されます) を受け取り、その後にイベントの受信時に呼び出されるコールバック関数が続きます。ここで、data は受信したデータです。
上記の例では、ニュース イベントを送信し、他のイベント イベントを受信しました。その後、クライアントには対応する受信イベントと送信イベントが必要になります。はい、クライアント コードはサーバー コードの正反対であり、非常によく似ています。
クライアント (client.js)
<スクリプト src="/socket.io/socket.io.js">
<スクリプト>
varソケット = io.connect('http://localhost');
socket.on('ニュース', 関数 (データ) {
console.log(データ);
socket.emit('他のイベント', { my: 'データ' });
});
注意すべき点が 2 つあります。socket.io.js パスは正しく記述する必要があります。このファイルは実際にはサーバー側の node_modules フォルダーに配置されるため、このファイルはリダイレクトされます。このファイルがサーバー側に存在しないのは驚くべきことではありませんが、なぜこのファイルはまだ正常に機能するのでしょうか?もちろん、サーバー側のsocket.io.jsファイルをローカルにコピーして、それをクライアント側のjsファイルにすることもできます。これにより、毎回Nodeサーバーからjsファイルをリクエストする必要がなくなり、安定性が向上します。 。 2 番目のポイントは、varソケット = io.connect('website address or ip'); を使用してソケット オブジェクトを取得し、そのソケットを使用してイベントを送受信できるようにすることです。イベント処理に関して、上記のコードは、「ニュース」イベントを受信した後、受信したデータを印刷し、「その他のイベント」イベントをサーバーに送信することを示しています。
注: 「disconnect」などの組み込みのデフォルト イベント名は、クライアント接続が切断されることを意味し、「message」はメッセージが受信されることを意味します。不要なトラブルを避けるために、カスタム イベント名は、Socket.IO に組み込まれているデフォルトのイベント名と同じ名前にしないでください。
4. その他の一般的に使用される API
1) すべてのクライアントにブロードキャストします:socket.broadcast.emit('ブロードキャスト メッセージ');
2) ルームに入ります (使い方は非常に簡単です。これは名前空間に相当し、他のルームのクライアントやルーム外のクライアントに影響を与えることなく、特定のルームにブロードキャストできます)。 );
3) メッセージをルームにブロードキャストします (送信者はメッセージを受信できません):socket.broadcast.to('your room name').emit('broadcast room message');
4) ルームにメッセージをブロードキャストします (送信者がメッセージを受信できることを含みます) (この API は io.sockets に属します): io.sockets.in('別のルーム名').emit('ブロードキャスト ルーム メッセージ' );
5) WebSocket 通信の使用を強制します: (クライアント)socket.send('hi')、(サーバー)socket.on('message', function(data){}) を使用して受信します。
5. Socket.IO を使用してチャット ルームを構築します
最後に、簡単な例を示してこの記事を終わります。 Socket.IO を使用してチャット ルームを構築するには、約 50 行のコードのみが必要で、リアルタイム チャット効果も非常に優れています。キーコードは以下に掲載されています:
サーバー (socketChat.js)
//クライアントがサーバーに接続するときのクライアント接続の辞書
//一意のsocketIdが生成され、辞書はsocketIdとユーザー情報(ニックネームなど)のマッピングを保存します
var connectionList = {};
exports.startChat = function (io) {
io.sockets.on('接続', 関数 (ソケット) {
// クライアントが接続するときに、socketId とユーザー名を保存します
varソケットId =ソケット.id;
ConnectionList[ソケットId] = {
ソケット: ソケット
};
//ユーザーがチャット ルーム イベントに入り、自分のユーザー名を他のオンライン ユーザーにブロードキャストします
socket.on('join', function (data) {
ソケット.broadcast.emit('broadcast_join', data);
ConnectionList[socketId].username = data.username;
});
//ユーザーがチャット ルーム イベントから退出し、他のオンライン ユーザーに退出をブロードキャストします
socket.on('切断', function () {
If (connectionList[socketId].username) {
ソケット.broadcast.emit('broadcast_quit', {
ユーザー名: connectionList[socketId].username
});
}
delete connectionList[socketId];
});
//ユーザーのスピーチイベント。スピーチの内容を他のオンラインユーザーにブロードキャストします
ソケット.on('言う', 関数 (データ) {
ソケット.broadcast.emit('broadcast_say',{
ユーザー名: connectionList[socketId].username,
テキスト: data.text
});
});
})
};
クライアント(socketChatClient.js)
varソケット = io.connect('http://localhost');
// サーバーに接続したら、すぐに「参加」イベントを送信し、他のユーザーにユーザー名を伝えます
ソケット.emit('結合', {
ユーザー名: 'ユーザー名へへ'
});
//トークルーム参加ブロードキャスト受信後、メッセージを表示
socket.on('broadcast_join', function (data) {
console.log(data.username 'チャット ルームに参加しました');
});
//チャットルーム退出ブロードキャストを受信後、メッセージを表示します
ソケット.on('broadcast_quit', function(data) {
console.log(data.username 'チャット ルームから退出しました');
});
//他の人からメッセージを受信した後、メッセージを表示します
socket.on('broadcast_say', function(data) {
console.log(data.username 'say: ' data.text);
});
//ここでは、テキスト ボックス textarea と送信ボタンがあると仮定します。btn-send
//jQuery を使用してイベントをバインドします
$('.btn-send').click(function(e) {
//テキストボックスのテキストを取得します
var text = $('textarea').val();
//say イベントを送信すると、サーバーは受信時にそれをブロードキャストします
ソケット.emit('言う', {
ユーザー名: 'ユーザー名 hehe'
テキスト: テキスト
});
});
これはシンプルなチャット ルームのデモです。ニーズに応じて拡張できます。 Socket.IO は基本的にさまざまなイベントの送信と受信の処理を行います。その考え方は非常にシンプルです。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
