푸셔: 실시간 기능

채팅을 만들 때마다 나는 항상 socket.io로 작업하는 것에 대해 생각하지만 이번에는 뭔가 다른 것을 찾고 싶었고 그때 Pusher를 발견했습니다.
Pusher는 개발자가 애플리케이션에 실시간 및 기능을 쉽게 추가할 수 있도록 해주는 호스팅 서비스입니다. 웹 사이트에서 코드를 사용하는 방법에 대한 지침도 제공합니다. 나는 많이 보았다
몽구스와 함께 사용하는 사람들의 자습서이지만 Sequelize로도 수행할 수 있습니다. 저는 Sequelize와 React를 사용하는 애플리케이션에서 작업해 왔으며 이것이 어떻게 작동하는지 간략하게 보여드리겠습니다. 먼저 Pusher로 이동하여 계정을 시작하겠습니다.

푸셔로 먼저 이동하면 무료 계정에 서명하게 됩니다.



계정을 만들면 채널을 만들 수 있습니다.



애플리케이션의 이름을 선택한 다음 프런트엔드와 백엔드에 무엇을 사용하고 있는지 묻는 메시지가 표시됩니다.
이 방법으로 Pusher는 애플리케이션에서 설정하는 데 도움이 되는 몇 가지 스니펫을 제공합니다.



여기에 백엔드 및 프런트엔드에 대해 설정하는 방법에 대한 지침이 있습니다.

백엔드


프런트엔드


이제 코드로 이동하겠습니다.

먼저 푸셔를 설치해야 합니다.

npm install pusher

저는 데이터베이스로 작업 중이므로 Message라는 모델을 가져오고 익스프레스 라우터를 사용하여 메시지에 대한 특정 경로를 생성합니다. 키 정보를 숨기기 위해 dotenv를 사용하고 있습니다.
이제 푸셔를 가져와서 백엔드로 가져온 다음
이를 수행하는 방법에 대한 스니펫이 있는 node.js를 보십시오.

require('dotenv').config();
const { Router } = require('express');
const { Message } = require('../db/index');
const Pusher = require('pusher');

const messageRouter = Router();


const pusher = new Pusher({
  appId: process.env.PUSHER_ID,
  key: process.env.PUSHER_KEY,
  secret: process.env.PUSHER_SECRET,
  cluster: process.env.CLUSTER,
  useTLS: true
});


module.exports = { messageRouter };

먼저 데이터베이스에 전송된 메시지 정보를 저장하는 게시 요청이 있을 것이고 거기에서 우리는 모든 변경 사항을 듣고 즉시 데이터를 표시하기 위해 다시 보낼 것입니다!

messageRouter.post('/', (req, res) => {
  const {
    id_league, words, id_user, username
  } = req.body;

  Message.create({
    id_league, id_user, words, username
  })
    .then((response) =>  res.send('message created’))
    .catch((error) => console.warn(error));
});

그래서 저는 리그 ID, 사용자 ID, 메시지인 단어 및 사용자 이름이 포함된 본문을 취하는 메시지를 생성하는 경로를 만들었습니다.
저는 Sequelize를 사용하고 있으므로 데이터베이스에 저장하기 위해 create를 사용하고 있습니다. 그런 다음 생성되면 메시지가 생성되었음을 알려주는 응답이 표시됩니다.

이제 응답 직후에 수신기를 추가할 것입니다.

푸셔 코드 조각을 보면. 트리거를 사용할 때 메시지가 될 채널과 삽입된 이벤트를 추가해야 합니다.

messageRouter.post('/', (req, res) => {
  const {
    id_league, words, id_user, username
  } = req.body;

  Message.create({
    id_league, id_user, words, username
  })
    .then((response) => {
      pusher.trigger('messages', 'inserted', {
        id_league: response.id_league,
        id_user: response.id_user,
        words: response.words,
        username: response.username,
        createdAt: response.createdAt
      });
      res.send('message sent');
    })
    .catch((error) => console.warn(error));

이제 프런트 엔드로 가보겠습니다.

먼저 pusher-js를 설치합니다.

npm install pusher.js

그런 다음 가져 와서 useState 및 useEffect를 반응에서 사용할 것입니다.
useEffect는 메시지를 배열에 저장합니다.
그런 다음 Pusher에서 제공하는 코드 스니펫을 보고 이를 사용 효과에 추가할 수 있습니다. 푸셔 키를 추가할 것입니다.

import React, { useState, useEffect } from 'react';
import Pusher from 'pusher-js';

function MessageBoard() {

useEffect(() => {
    const pusher = new Pusher(process.env.PUSHER_KEY, {
      cluster: 'us2'
    });

    const channel = pusher.subscribe('messages');
    channel.bind('inserted', (newMessage) => {
      setMessages([...messages, newMessage]);
    });

    return () => {
      channel.unbind_all();
      channel.unsubscribe();
    };
  }, [messages]);

이제 메시지 채널을 듣고 삽입된 이벤트에 바인딩하고 있습니다. setState는 배열과 useEffect에 추가합니다.
그런 다음 더 나은 성능을 위해 리스너를 취소합니다.

이것은 Pusher가 애플리케이션에서 어떻게 작동하는지 보여주는 빠른 방법입니다. 가서 서류를 확인하는 것이 좋습니다. 설정하기도 쉽고 앞으로도 자주 이용하겠습니다.