이것은 웹 플러그인과 플러그인의 기본 원리를 이해하는 기술 건설 프로젝트이다.IO 및 Express.나의 목표는 웹 플러그인을 새로운 전체 창고 프로젝트에 집적하고 웹 플러그인을 복습하여 장래에 Discord 같은 개원 환매에 기여할 수 있도록 하는 것이다.js 및 SocketIO
디자인 영감 Angela He.프로젝트 소스 코드here를 찾을 수 있습니다.

도구:

HTML - 하이퍼텍스트 태그 언어.

SCSS - 단순화 스타일을 위한 CSS 사전 프로세서입니다.

JavaScript - 서버 사이드 코드 및 웹 이벤트

jQuery - HTML DOM 작업을 단순화하는 데 사용되는 JavaScript 라이브러리입니다.

Express - 애플리케이션 서버를 구축하는 데 사용되는 JavaScript 프레임워크입니다.

노드 - 브라우저 외부에서 JavaScript 코드를 작성하는 데 사용되는 JavaScript 런타임 환경입니다.

콘센트.io - 실시간 서버 클라이언트/통신을 위한 JavaScript 웹 소켓 프레임워크입니다.

웹 소켓

웹 플러그인은 클라이언트와 서버의 실시간 통신을 돕는 양방향 프로토콜입니다!

느슨하거나 불협화음 속에서 진행되는 단체 채팅을 상상해 보세요.동료에게 다가오는 마지막 기한에 대한 메시지를 보내거나 비디오 게임에서 목표를 이루지 못한 동료에게 소리를 지르면 단체 채팅방의 모든 사람들이 메시지를 보낸 후 바로 이 메시지를 받는다.

웹 소켓을 사용하는 이유는 무엇입니까?

웹 소켓은 HTTP 송신/수신 범주를 중심으로 설계되었습니다.웹 플러그인은 실시간이기 때문에 피어 네트워크(P2P)와 유사하기 때문에 우리는 어떤 단점의 응답도 기다릴 필요가 없고 HTTP 요청이 가져오는 비용도 처리할 필요가 없다. 예를 들어 새로운 연결을 열거나 연결을 닫거나 몇 초 또는 몇 분 안에 서버 업데이트를 빈번하게 요청할 필요가 없다.만약 우리가 빠른 응답을 원한다면, 이것은 쓸모가 없을 것이다.

그러나 이러한 유형의 통신에 대해 웹 플러그인은 더욱 유연하고 믿을 만하다.우리는 GET 요청을 자주 반복할 필요가 없다. 단지 새로운 내용이 있는지 확인하기 위해서이다.연결은 클라이언트와 서버 간에 언제든지 데이터를 보낼 수 있도록 열려 있습니다.

경우에 따라 HTTP가 가장 좋습니다.한 가지 이유는 모든 웹 브라우저의 지원을 받았기 때문이다.서버가 대량의 개방 연결을 유지할 필요가 없기 때문에 사용자를 대량으로 연결하는 응용 프로그램에 있어서도 더욱 좋다.
웹 소켓의 또 다른 대체 방안은 Server-Sent Events (SSE) 이다.이것은 클라이언트와 서버 사이에 단방향 연결을 만들었습니다. 서버만 데이터를 클라이언트에게 전달해야 합니다.

콘센트io

SocketIO는 웹 플러그인을 사용하여 응용 프로그램을 구축하는 데 사용되는 자바스크립트 프레임워크입니다.다음은 두 개의 코드 세그먼트로 클라이언트와 서버에서 데이터를 보내고 네 번째는 서로 보내는 데 쓰인다.

서버 코드

server.js 에서 세 개의 이벤트 탐지기를 구축했습니다.

접속 이벤트

한 고객이 채팅에 들어간다

분리 이벤트

고객이 채팅방을 떠나다

채팅 메시지 이벤트

고객이 메시지를 보냈습니다.

const app = require('express')()
const http = require('http').createServer(app)
const io = require('socket.io')(http)

io.on('connection', socket => {
  console.log('A new user connected! ✨')

  socket.on('disconnect', () => {
    console.log('A user has disconnected.')
  })

  // Listens for the client chat event
  socket.on('chat message', msg => {
    // send the message out to everyone
    io.emit('chat message', msg)
  })
})

우리는 다른 방법emit()을 사용하고 있다.이것이 바로 우리가 이벤트를 서버에서 클라이언트로 보내는 방식이다. 반대로도 마찬가지다.server.js 에서 emit() 클라이언트로부터 새로운 메시지를 받을 때마다 클라이언트에게 'chat message' 이벤트를 보냅니다.

클라이언트 코드

index.html 에서 우리는 또 하나의 사건 탐지기와 사건 발사기를 가지고 있다.

  <script>
    const socket = io()
    const chatBubbleDiv = '<div class="bubble"></div>'
    $('form').submit(e => {
      // prevent page refresh 
      e.preventDefault()

      // send chat event to the server
      socket.emit('chat message', $('#message').val())

      // clear the message in the form
      $('#message').val('')
      return false
    })

    // display sent message to all clients
    socket.on('chat message', msg => {
        $('#messages').append($(chatBubbleDiv).text(msg))
    })
  </script>

사용자가 메시지를 보낼 때 이벤트 발사기가 서버에 알립니다.그리고 서버가 'chat message' 이벤트를 클라이언트에게 보내면 연결된 모든 사용자에게 메시지를 표시합니다.
웹 플러그인은 각종 프로젝트의 데이터 흐름을 잘 촉진할 수 있습니다!이것은 재미있는 기능 배양 프로젝트입니다. 저는 그것을 미래의 프로젝트에 응용할 수 있어서 매우 기쁩니다.아래에 어떤 생각이나 평론을 마음대로 추가하세요.읽어주셔서 감사합니다!

공구서류

콘센트.입출력 문서: https://socket.io/

서버가 보낸 이벤트: https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events