socket.io로 로그인 알리기

socket.io로 로그인 알리기

// globalRouter.js

globalRouter.post(routes.login, onlyPublic, postLogin, notifyLogin);

login 부분에서 postLogin 뒤에 notifyLogin을 추가한다. 사용자가 로그인을 하면 게임을 하고 있는 모든 사용자에게 알림이 가도록 한다.

import events from "../events";
import io from "../server";

const superBroadcast = (event, data) => io.emit(event, data);

export const postLogin = passport.authenticate("local", {
  // successRedirect: routes.home,
  failureRedirect: routes.login,
});

export const notifyLogin = async (req, res) => {
  const {
    user: { id },
  } = req;
  const newUser = await User.findById(id);
  const username = newUser.username;
  io.once("connection", (socket) => {
    io.to(socket.id).emit(events.newUser, { username });
  });
  superBroadcast(events.newUser, { username });

  res.redirect(routes.home);
};

원래는 postLogin 부분에서 로그인에 성공을 하면 home으로 redirect가 되었는데, 그렇게 하지 않고 notifyLogin을 실행하도록 하였다. 대신 home으로 redirect되는 부분은 notifyLogin에 넣었다.

// main.js

import "./sockets";
import "./login";
import "./notifications";

모든 Client 측의 모듈들은 main.js에 선언되고 gulp가 main.js를 trans-compile을 한다.

// login.js

import { initSocket } from "./sockets";

const socket = io("/");

initSocket(socket);

// sockets.js

import { handleNewuser } from "./notifications";

let socket = null;

export const getSocket = () => socket;

export const initSocket = (aSocket) => {
  const { events } = window;
  socket = aSocket;
  socket.on(events.newUser, handleNewuser);
};

  Client 측에서 사용되는 sockets.js 파일이다. 앞으로 생길 모든 client의 socket 통신은 initSocket에 추가될 것이다. login.js에서 initSocket이 초기화 되고, 각각의 모듈들이 socket통신을 할 때 getSocket() 함수를 사용해서 초기화 된 socket을 사용한다.

// notifications.js

import { getSocket } from "./sockets";

const body = document.querySelector("body");

const fireNotification = (text, color) => {
  const notification = document.createElement("div");
  notification.innerHTML = text;
  notification.style.backgroundColor = color;
  notification.className = "notification";
  body.appendChild(notification);
};

export const handleNewuser = ({ username }) => {
  const text = `${username} just joined!`;
  const color = "rgb(0, 122, 255)";

  fireNotification(text, color);
};

// notifications.scss

@keyframes notification {
  0% {
    transform: translateY(80px);
    opacity: 0;
  }
  50% {
    transform: translateY(-90px);
    opacity: 1;
  }
  100% {
    transform: translateY(-70px);
    opacity: 1;
  }
}

@keyframes dissapear {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.notification {
  opacity: 0;
  bottom: -100px;
  position: absolute;
  bottom: 0px;
  left: 50px;
  box-shadow: 0 13px 27px -5px rgba(50, 50, 93, 0.25),
    0 8px 16px -8px rgba(0, 0, 0, 0.3), 0 -6px 16px -6px rgba(0, 0, 0, 0.025);
  background-color: white;
  padding: 20px 50px;
  text-align: center;
  border-radius: 50px;
  animation: notification 0.5s ease-out forwards,
    dissapear 0.5s ease-in forwards;
  animation-delay: 0.5s, 2s;
  color: white;
}

sockets.js에서 socket.on(events.newUser, handleNewuser)가 발생하면 handleNewuser 함수가 실행되어 Clients에게 다른 사용자가 접속했다는 것을 알린다.

소스 코드

github.com/zpskek/guessMind-v3/commit/74dbbe75ee74d5e06d7366e3ba560bc1ebe27b53

CSS : github.com/zpskek/guessMind-v3/commit/d0a9a20cbd2fb6681e25b56b920cc31b2b3ce479