ソケット入門.IO

6170 ワード


何ですか。


ソケットのIOが混乱しているのは混乱です.
これは、クライアントのブラウザとサーバー間のリアルタイム、双方向、およびイベントベースの通信を可能にするJavaScriptライブラリです.それで、それは何のように見えるか、意味さえしますか?視覚補助を使いましょう.

上記の写真では、クライアントがサーバーに要求を行うのを見ることができます.そして、サーバは要求を処理して、若干のデータを送り返す.これはHTTPリクエストの標準です.接続が開き、リクエストが送られ、リクエストが処理され、データが返され、最後に接続が終了します.これは、ページリロードまたはリクエストがタイマーまたは他の手動プロセスにある場合を除き、1回の繰り返しではありません.さらに、サーバはデータをクライアントに送信することはできません.それは要求を待たなければなりません.

逆に、ソケットIOからの接続は生き続けます.そうでなければクライアントとサーバの接続をオープンします.これは、サーバーからの更新を要求されていないクライアントに送信され、サーバーとクライアントの任意の数の間で瞬時に瞬時に通信を可能にします.
ソケットのIOデータをより自由にサーバーからクライアントに移動することができます.
シナリオです
クライアントAとクライアントBは、ソケットIOを実行している同じノードサーバにソケット接続をオープンします.データを自由にサーバーからクライアントに流れることができます.
クライアントAはノードサーバにメッセージを送ります
サーバはメッセージイベントを聞き、クライアントからメッセージを受け取る.
サーバーは、それがAからメッセージを見るかもしれないように、接続されたクライアントBにメッセージを送ることに決めます.
上記のシナリオクライアントBでは、サーバーからメッセージを要求することは全くありませんでした.それがすべての接続を開いて、イベントがその途中で発射されるのを待つことでした.

ソケットサーバへのノードの追加


これは、ノードを使用して基本的なExpressサーバーの設定に精通していると仮定します.
ソケットIOを使い始めるにはまず最初にインストールしなければなりません:npm install socket.io --saveサーバのJSファイルの中にはソケットIOを追加する必要があります.
最も基本的な実装は次のようになります.
//require express
const express = require('express');
//require socket.io
const socket = require('socket.io');

const app = express();

//start server
const server = app.listen(3000, () => {
    console.log('Server listening on port 3000');
});
//attach socket io to server
const io = socket(server);

io.on('connect', (socket) => {
    console.log(`Client connected with socket ID: ${socket.id}`);
});
上記はソケットIOをサーバーに加えて、入って来る接続のためにイベントリスナーをセットアップします.現時点では単にコンソールにソケットIDを記録します.

クライアントに対するソケットIOの追加


クライアントは独自のソケットクライアントを必要とします.私はフックベースのクライアントを使用するように選択しました.npm i use-socket.io-client反応コンポーネントでは、サーバーに接続しなければなりません.
import React from 'react'
import useSocket from 'use-socket.io-client';

function example() {
    const [socket] = useSocket();
    socket.connect();

    return (
        <div>
            Hello World
        </div>
    )
}

export default example
おめでとう、この時点で正常にサーバーにクライアントを接続しました.注意すべきことはusesocket ()の中です.
それが起動されるとき、あなたはそれが接続することになっているサーバーのアドレスを通過するかもしれません.const [socket] = useSocket('ws://someAddress')しかし、ソケットIOが同じサーバーに反応することを意図しているなら、これは必要ではありません.それは自分でその接続を処理します.
あなたがソケットIOですることができることのより多くの例を見たいならば、official docsを見てください.特に彼らのemit cheatsheetを見てください