실시간 WebSocket 연결🔥 Nodejs를 사용합니다.

내가 처음으로 풀 스택 JS 개발을 배우기 시작했을 때, 나는 서버와 클라이언트 간의 차이/관계를 거의 이해할 수 없었다.나는 나의 첫 CRUD 응용 프로그램이 엉망진창이었던 것을 기억한다.서버(백엔드)를 개발한 후에 클라이언트(백엔드)에 데이터를 보내는 절차를 이해할 수 없습니다.따라서 실제로 내가 하는 일은 데이터베이스를 직접 조작하는 함수를 내보내고 클라이언트에서 사용하는 것이다. (기본적으로 모든 데이터를 파괴할 것이다.)

너는 조리사와 참석자가 와서 모임을 조직해야 한다🎆

조만간 나는 클라이언트와 서버 간의 차이/관계를 깨닫게 될 것이다. 그것들은 완전히 다른 두 가지 일이다.
네가 자신의 컴퓨터로 인터넷을 훑어보고 뉴스나 어떤 물건을 검색할 때, 너는 시종 고객이다.서버는 단지 다른 컴퓨터일 뿐, 그들이 당신을 위해 잡을 수 있도록 뭔가를 요청하기를 기다립니다.그것을 모임으로 상상하다.만약 누군가가 너를 모임에 초대한다면, 참석자로서, 너는 고객이다.이 비유 속의 종업원은 조리사다.만약 당신이 음료수나 음식이 필요하다면, 조리사가 당신을 위해 서비스할 것입니다.

너 한잔 해야 돼.🍺? 너는 반드시 입을 열어야 한다!

이런 모임에서 서버가 얼마나 바쁜지 상상할 수 있다.만약 당신이 필요로 하는 것이 있다면, 당신은 반드시 조리사(종업원)에게 가서 당신이 필요로 하는 물건을 요구해야 합니다.그리고 서버는 네가 원하는 것을 줄 수 있다.
클라이언트와 서버 간 통신에 사용되는 가장 일반적인 프로토콜은 HTTP입니다.HTTP는 요청 - 응답 기반 통신입니다.클라이언트가 데이터 세그먼트를 필요로 한다면 서버에 요청 (req) 을 보내야 합니다.그리고 서버는 req를 읽고 클라이언트가 요청한 데이터를 포함하는 응답 (res) 을 보냅니다.이것은 통상적으로 악수라고 불린다.클라이언트가 응답을 시작하지 않으면 서버는 거의 아무것도 할 수 없습니다.
NodeJ로 express 서버를 만들어서 어떻게 작동하는지 봅시다.
(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현재 우리의 서버는 이미 준비가 되었으니, 우리가 클라이언트 업무를 하도록 합시다.
브라우저를 열고 urllocalhost:5000/server로 이동합니다.페이지에 접근하면 기본적으로 서버에 요청을 보내고 응답을 기다립니다.페이지를 불러오면 응답을 볼 수 있습니다.(화면이 표시되어야 합니다response.
당신은 임의의 여러 개의 노드를 만들 수 있으며, 모든 노드가 서로 다른 응답에 서비스를 제공할 수 있습니다.
서버가 응답으로만 데이터를 보낼 수 있다고 했던 거 기억나세요?따라서 클라이언트는 요청을 보내는 클라이언트여야 한다.코드를 편집하고 두 개의 응답을 보내는 경우

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를 사용하여 다른 응답을 보내려면 다른 요청이 필요합니다.
RESTful API에 대한 자세한 내용은 here 로 이동하십시오.

그럼 WebSocket은 도대체 뭐예요?VIP 조리사?

그래, 인정해.조리사의 유비는 우리를 지금까지만 데리고 왔다.Websocket 연결이 더 고급스럽고 복잡합니다.나는 가능한 한 간단함을 유지할 것이다.
우리는 이전에 HTTP 프로토콜이 req-res 기반 프로토콜이라는 것에 동의했다.따라서 모든 응답에 대한 요청이 필요합니다.이것은 웹소켓(ws) 연결이 해결하는 주요 문제입니다.
ws 연결을 사용하면 클라이언트가 매번 연결을 시작하고 요청을 보내서 응답을 받을 필요가 없습니다.반대로 클라이언트가 서버에 처음 연결될 때 서버와 양방향 연결을 합니다.일단 연결이 이루어지면 서버나 클라이언트는 서로 연락할 수 있으며 서버가 요청을 기다릴 필요가 없다.따라서 고객도 모르는 일을 받을 수 있다.(이게 문자 앱이 생각나나요?)
채팅 앱이 좋은 예다.
자신이 고객이고 친구가 서버라고 상상해 보세요.만약 당신이 단지 친구에게 문자를 보냈을 뿐이라면, 당신은 반드시 메시지 (요청) 를 보내고 친구의 답장 (답장) 을 기다려야 합니다.그곳에서 네가 그에게 전화한 것처럼 너희들은 즉시 이야기를 나누고 상대방의 목소리를 들을 수 있다.
(면책 성명: 메시지 전달 응용 프로그램이라도 네트워크 플러그인 연결을 통해 구축됩니다. 저는 단지 그것으로 차이를 설명할 뿐입니다.)
다음 그림은 일반적인 HTTP 연결과 웹소켓 연결 사이의 차이를 보여 줍니다.어느 쪽이든 연결을 끊을 때 ws 연결이 닫힙니다.

WS 연결의 예시를 보기 위해 간단한 채팅 프로그램을 구축합시다👽

먼저 서버를 준비하겠습니다.우리가 방금 구축한 것은 일반적인 RESTAPI를 사용하여 구축한 express 서버이다.우리는 이 점을 바꿔야 한다.
WS 연결을 구축하기 위해서, 우리는 두 개의 추가 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-connections에 사용되는javascript 라이브러리입니다.많지만, 가능한 한 간단하게 이해하자.양방향 연결을 설정한 후.사용자 구독 이름 채널.서버는 나중에 일부 데이터를 특정 채널로 보낼 수 있습니다.위의 예에서 우리는 "chat" 라는 통로를 만들었다.현재, 일단 우리가 클라이언트에서 한동안 일하면, 우리는 데이터를 이 채널로 보낼 수 있다.일단 우리가 이렇게 하면 데이터는 먼저 서버에 들어간다.그리고 서버는 채널chat에 같은 데이터를 다시 보냅니다.이렇게 하면 데이터를 보내는 사람이 데이터를 받을 수 있을 뿐만 아니라 구독chat 채널의 모든 사람이 데이터를 받을 수 있다.
콘센트io는 WS 연결을 매우 쉽게 만듭니다.보시다시피 우리는 몇 줄의 코드만으로 채팅 서버를 준비했습니다.이제 클라이언트의 상황을 봅시다.우리는 그것을 간단하게 하고 클라이언트를 위해 최소 반응 채팅 프로그램을 만들 것이다.

콘센트클라이언트의 io(React).

먼저 일반적인 React 템플릿을 생성하고 필요한 모듈을 추가합니다.

터미널로 이동

새 디렉터리를 만들고 cd를 넣기(mkdir client; cd client

작동npx create-react-app my_app

(완료 후)

작동npm i socket.io-client

이 명령을 순서대로 실행하면 React 응용 프로그램을 열고 편집합니다/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 startReact 응용 프로그램을 실행하면 node server.js 에서 볼 수 있습니다.여러 탭에서 같은 URL을 열고 다른 탭에서 메시지를 보내십시오.
모든 탭이 즉시 업데이트되는 것을 볼 수 있습니다.http://localhost:3000 WS-connections를 단순화합니다.사실은 그들이 무거운 짐을 싣는 상황에서 효율이 더욱 높다는 것을 증명한다.따라서 서버에 대량의 데이터가 있기를 원한다면 웹소켓 연결을 잘 관리할 수 있습니다.
페이지를 새로 고치면 모든 메시지가 삭제됩니다.서버에 메시지가 저장되지 않았기 때문입니다.우리는 메시지에 쓰거나 오래된 메시지를 추출할 수 있는 데이터베이스가 없습니다.우리의 서버는 단지 채팅 응용 프로그램의 사용자 간의 교량일 뿐이다.

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 :)