SendGrid 활동을 검색합니다.입출력 버튼으로 표시

14917 단어 Node.jssendgridsocketiotech
SendGrid의 이벤트웹훅에서 활동을 확인할 때 Request Bin와Webhook.site 같은 사이트를 자주 이용한다.같은 걸 직접 만들고 싶지만 어떻게 서버에서 받은 POST 데이터를 클라이언트(브라우저)에 떠넘기는지...그래서 전에 들었던 웹소켓과 SSE(Server-sent Events)를 찾아보고 알았어Socket.IO.
해봤는데 간단하게 이루어졌으니 총결산해 봅시다.환경은 docker의 alpine linux3.15.0 & Node입니다.js17.3.0입니다.

app.js


우선 서버 쪽입니다.여기.로 쓴 앱입니다.네, 제이스 소켓.입출력 Get Started의 서버 측을 참조했습니다.
app.js
const express = require('express');
const { createServer } = require('http');
const { Server } = require('socket.io');
const bodyParser = require('body-parser');

const app = express();
const httpServer = createServer(app);
const io = new Server(httpServer);

app.use(bodyParser.json());
app.get('/', (req, res) => {
    res.sendFile(__dirname + '/index.html');
});

app.post('/', (req, res) => {
    io.emit('message', JSON.stringify(req.body));
    res.sendStatus(200);
});

io.on('connection', socket => {
    console.log('connection');
    socket.on('disconnect', () => {
        console.log('disconnect');
    });
});

httpServer.listen(3000);
처음에 POST 부분은 이렇게 썼지만 Send Grid의 Event Webhook은 JSON 대상의 배열이기 때문에 아무것도 하지 않으면 고객 측은 [object Object], [object Object]...의 표시 JSON.stringfy입니다. 따라서 문자열로 변환됩니다.(사용법이 있나...)
app.post('/', (req, res) => {
    io.emit('message', req.body);
    res.sendStatus(200);
});

index.html


클라이언트 HTML.socket.io.min.js는 CDN의 물건을 이용했다.p탭에 서버에서 받은 데이터를 추가하기만 하면 됩니다.
index.html
<!DOCTYPE html>
<html>
  <head>
      <meta charset="utf-8">
      <title>SendGrid Event Webhook</title>
  </head>
  <body>
      <p id="message"></p>
      <script src="https://cdn.socket.io/4.4.0/socket.io.min.js" integrity="sha384-1fOn6VtTq3PWwfsOrk45LnYcGosJwzMHv+Xh/Jx5303FVOXzEnw0EpLv30mtjmlj" crossorigin="anonymous"></script>
      <script>
        const socket = io();
        var message = document.getElementById("message");
        socket.on('message', msg => {
            message.innerHTML += msg;
        });
        </script>
  </body>
</html>

실행 결과


동작 확인은 여기. 단계에서localtunnel을 사용하는 로컬 환경에서 이루어집니다.
방문했을 때부터 아무것도 보이지 않은 상태였습니다.Event Webhook의 "Test Your Integration"을 눌러 POST 데이터를 받으면 서버에서 클라이언트(브라우저)에 표시됩니다.

이 초대장을 어디에 두면 리퀘스트 빈처럼 사용할 수 있을 거예요.
Lubuntu 상세 설정
FZU 1416 항공기 급유 질문(DP)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage