リアルタイムのWebSockets接続🔥 NODEJS(チャットアプリの例)で.

私が最初に完全なスタックJS開発を学んだとき、私はサーバとクライアントの違い/関係をほとんど理解することができませんでした.私の最初のCRUDアプリケーションは、混乱だった覚えている.私はサーバー(バックエンド)を開発した後、私はクライアント(フロントエンド)にデータを送信する手順を理解することができなかった.それで、文字通り、私がしたのは、データベースを直接操作し、クライアント上でそれらを使用する(基本的にすべてのデータを妥協する)機能をエクスポートすることでした.

あなたはパーティーを得るためにバーテンダーと参加者が必要です🎆

クライアントとサーバの違い・関係について頭を包むまでは時間の問題だった.
ときに自分のコンピュータのニュースや何かを検索すると、インターネットを閲覧している場合は、常にクライアントです.サーバーはちょうど別のコンピュータはあなたのために何かを求めることを待っているので、彼らはあなたのためにそれをつかむことができます.パーティーとして考えてください.誰かが出席者としてパーティーにあなたを招待するならば、あなたはクライアントです.このアナロジーのサーバーはバーテンダーです.あなたが飲酒または食物を必要とするならば、バーテンダーはあなたにサービスを提供するものです.

お飲み物が必要です🍺? あなたはそれを求めなければならない！

そのようなパーティーでは、サーバーがどれくらい忙しいか想像できます.あなたが何かを必要とする場合は、(クライアント)バーテンダー(サーバー)に行く必要があります求めてください.サーバーは、行くことができますし、あなたが求めたものを得る.
クライアントとサーバ間の通信に使用される最も一般的なプロトコルはHTTPです.HTTPは要求応答ベースの通信です.クライアントがデータの特定の部分を必要とするなら、それはサーバに要求(REQ)を送らなければなりません.サーバはREQを読み込み、クライアントが要求したデータを含む応答(RES)を送信する.これは通常握手と呼ばれます.クライアントが応答を開始しない場合、サーバはほとんど何もしません.
NODEJSとの明示的なサーバーを作成し、どのように動作を参照してください.
( ExpressはHTTPに基づいたREST APIを使用します).

端末を開く

ファイルを保存したいディレクトリ

コマンドを実行するnpm init -y

ランnpm i express

あなたがフォルダを開くならば、あなたはpackage.json ファイル.
クリエイトアserver.js ファイルを次のように書きます.

const express = require('express')  // Import express
const app = express()  // create the express app


app.get('/server', (req, res) => {  // the location of the server (localhost:port/server)
    res.send('response')
})

app.listen(5000, () => {  // listen to port 5000 (localhost:5000/)
    console.log('listening ...')
})

ご覧のように、我々はポート5000でサーバーを設定し、それを要求を受け取る/server エンドポイント.クライアントからエンドポイントにリクエストを取得すると、OUTサーバは文字列を送信します"response" として.
サーバーを実行するには、端末に行って実行します.node server.js我々のサーバーが準備ができたので、クライアント仕事をしましょう.
ブラウザを開いてURLに移動localhost:5000/server . ページを訪問することによって、あなたは基本的にサーバーに要求を送って、それの応答を待っています.ページが読み込まれると、あなたの応答が表示されます.スクリーンが表示すべきresponse ).
あなたは多くのエンドポイントをしたいとすることができますし、各エンドポイントが異なる応答を提供している.
私がサーバーが応答としてデータを送ることができると言ったとき、覚えています?それで、クライアントは要求を送るものでなければなりません.コードを編集し、代わりに2つの応答を送信しようとすると

app.get('/server', (req, res) => {  // the location of the server (localhost:port/server)
    res.send('response')
    res.send('another response')
})

コードを保存して実行するnode server.js 再び.その後、ブラウザと訪問に戻るlocalhost:5000/server . 最初のレスポンスだけを見ることができます"response" ). 端末を見ていると、次のエラーが表示されます.Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client . HTTPでは、別の応答を送信する場合は、別の要求が必要です.
(Go here RESTful APIについてもっと知りたい場合.

それでは、正確にWebSockets何ですか？VIPバーテンダー？

OK.バーテンダーの類推は、これまで我々を連れて行くだけです.WebSocket接続はもう少し高度で複雑です.できるだけ簡単にしておきます.
HTTPプロトコルがREQ RESベースのプロトコルである前に、我々は同意しました.だから、各応答の場合は、要求が必要です.これは主要な問題WebSockets(WS)の接続が解決されます.
WS接続で、クライアントは接続を開始して、応答を受け取るために毎回リクエストを送る必要はありません.代わりに、クライアントが最初にサーバーに接続すると、サーバーと双方向接続を確立します.一旦接続が確立されるならば、サーバーまたはクライアントは要求を待つ必要があるサーバーなしで互いに達することができます.それで、クライアントはそれが来るということを知らなかった何かを受け取ることもできます.(これはアプリのメッセージングを思い出させましたか??)
チャットアプリは、違いを知るのに最適な例です.
サーバーとしてクライアントとあなたの友人として自分を想像してください.あなただけのテキストメッセージをしている場合は、メッセージ(要求)を送信する必要がありますし、メッセージをあなたの友人を待って(応答).どこに彼を呼び出すように、両方の話を聞くことができると瞬時にお互いを聞く.
(免責事項:メッセージングアプリケーションもWebソケット接続で構築されています.私は違いを説明するアナロジーとしてそれを使用します).
下記の写真は、通常のHTTP接続とWebSocket接続の違いを示します.WS接続は、2つの辺のいずれかが切断するときに閉じられます.

Ws接続の例を見るために、単純なチャット・アプリケーションを造りましょう👽

まずサーバを準備します.我々が構築したものは、正規のREST APIで構築されたExpressサーバーでした.我々はそれを変更する必要があります.
WS接続を構築するには、2つの余分なNPMモジュールをインストールする必要があります

ターミナルへ行く

ランnpm i http socket.io

エディットserver.js 次に示す

const express = require('express')
const app = express()
var http = require('http').createServer(app);  // build http server on top of the express one
var io = require('socket.io')(http);  // build a WS server on top of the http one.


// this runs whenever a client establishes a WS connection with the server
io.on('connection', (client) => {  
    console.log('a user connected')

    // this runs whenever the client sends something on the chat channel
    client.on('chat', (data) => {
        console.log('Message received -->', data)

        // this emits data back to all the users on the chat channel
        io.emit('chat', data)
    })
});


// Now make our new WS server listen to port 5000
io.listen(5000, () => {  
    console.log('Listening ... 🚀 ')
})

すごい!現在、我々のサーバーはリアルタイムのデータ転送を扱うことができて、双方向接続を確立することができます.ここで物事を説明するために少し時間がかかります.socket.io WS接続用のJavaScriptライブラリです.それにはたくさんありますが、できるだけ簡単に理解できます.双方向接続を確立した後.ユーザ/sは名前付きチャネルを購読します.サーバーは、後で特定のチャンネルに特定のデータを送るほうを選ぶことができます.上の例では、私たちは"chat" . 今一度クライアントで作業すると、このチャンネルにデータを送ることができます.一旦我々がするならば、データは最初にサーバーに行きます.次に、サーバーは、(すなわち、'チャット'、データ)を送信しますchat . このように、データを送った人だけがそれを受け取ることができますchat チャンネル.
ソケット.IOは超簡単にWS接続を確立することができます.ご存知のように、いくつかのコードラインでチャットサーバーを用意しました.今、クライアント側でどのように見えるかを確認できます.我々はそれだけで簡単に作成し、クライアントのための最小限の反応チャットアプリケーションを作成します.

ソケット。クライアント側のIO (反応)

最初に通常の反応テンプレートを生成し、必要なモジュールを追加します.

端末へ行け

新しいディレクトリとその中にcdを作るmkdir client; cd client )

ランnpx create-react-app my_app

(一旦行われると)

ランnpm i socket.io-client

あなたが順番にこれらのコマンドを実行した後、あなたの反応アプリを開き、編集することができます/src/App.js :

import React, { useState } from 'react';  // do NOT forget to import useState
import logo from './logo.svg';
import './App.css';

//Import Socket.io
import openSocket from 'socket.io-client';


function App() {
  // this is where we will be storing the message the user can create before we send it
  const [newMessage, setMessage] = useState('')

  // these are where all the messages will be.
  // It will first be an empty array but we will 
  // fill it up everytime the server sends us something
  const [allMessages, setAllMessages] = useState([])

  // Establish a WS connection with the server 
  const socket = openSocket('http://localhost:5000');  // <-- make sure the port is the same

  // this subscribes to the 'chat' channel
  // Whenever there are new messages, we put them in the array hook.
  socket.on('chat', (data) => {
    setAllMessages([...allMessages, data])
  })

  // this function runs onClicking the send button
  const sendMessage = () => {
    console.log('SENT')

    // it emits the new message written by the user to the 'chat' channel
    socket.emit('chat', newMessage);

    // clear the message from the text input after sending
    setMessage('')
  }

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <div>
          <h2>Chat Messages</h2>
          <div>
            {/* This is where we will be displaying all the messages */}
            {
              allMessages.map(message => {
                return <div>{message}</div>
              })
            }
          </div>
          <input onChange={(e) => setMessage(e.target.value)} placeholder="type your message .." />
          <button onClick={() => sendMessage()}>↪</button>
        </div>
      </header>
    </div>
  );
}

export default App;

甘い!これは本当に簡単に見えるし、仕事を取得します.
私たちがコードのこの部分でしたすべては、そうです:

サーバとのWS接続を確立する

テキスト入力を作成/send message ボタン

メッセージを表示する<div>

サーバーに新しいメッセージを送信しますchat チャンネル

購読するchat すべてのメッセージを得るチャンネル

驚くべき🙂 今我々はこれを実行する場合は、我々はワーキングチャットアプリを持っている必要があります!
ターミナルに行き実行するnpm start(サーバが動いていることを確認します.node server.js )
あなたの反応アプリを実行した後http://localhost:3000 . つのタブで同じURLを開くと別のタブからメッセージを送信してみてください.
すべてのタブが瞬時に更新されます.Socket.io は、接続を信じられないほど簡単です.そして、彼らはより重い荷でより効率的であると証明されます.それで、あなたがサーバーで多くのトラフィックを予想しているならば、WebSocket接続はちょうどよく管理します.
ページを更新すると、すべてのメッセージが削除されます.それはあなたのサーバーがどんなメッセージも格納していないからです.我々は、メッセージを書くか、古いメッセージを取り出すために、データベースを持っていません.当社のサーバーは、単に我々のチャットアプリのユーザー間のブリッジとして機能します.

I am on a lifetime mission to support and contribute to the general knowledge of the web community as much as possible. Some of my writings might sound too silly, or too difficult, but no knowledge is ever useless.If you like my articles, feel free to help me keep writing by getting me coffee :)