참고
- https://socket.io/how-to/get-the-ip-address-of-the-client
- chat-ui-kit-react로 채팅창 UI 만들기
- 로그인 + 채팅방 UI 만들기
- 채팅방 변경하기
- 채팅방 들어오고 나갈 때 표시하기
- Socket.IO로 채팅하기
- Socket.IO Room으로 채팅방 관리하기
- Socket.IO namespace로 채팅방 관리하기
- Socket.IO로 중복 로그인 제한하기
- Socket.IO Middleware로 중복 로그인 방지하기
중복된 아이디로 로그인을 한 경우, 자동으로 로그아웃 해보자.
구현
namespace 대신 room을 이용한 코드로 돌아간다.
로그인 유저의 ID와 클라이언트의 소켓 ID가 필요하다.
const loginIDSet = new Set();
const loginIDMap = new Map();
다음과 같이 Client의 IP를 얻을 수도 있지만, (링크 참고)
여기서는 하나의 PC에서 여러 다른 아이디로 접근하는 테스트를 진행한다.
console.log(socket.handshake.address);
로그인을 할 경우, 로그인 ID를 Set에 저장하고, socket.id와 mapping 한다.
이미 로그인 ID가 존재하는 경우 강제로 연결을 끊는다. (disconnect)
socket.on("login", (loginID) => {
if(loginIDSet.has(loginID)) {
socket.disconnect();
return;
}
loginIDSet.add(loginID);
loginIDMap.set(socket.id, loginID);
});
disconnect에서는 Set과 Map에서 ID를 제거한다.
중복 로그인 된 경우는 loginID가 undefined가 되어 아무 일도 일어나지 않는다.
socket.on("disconnect", () => {
let loginID = loginIDMap.get(socket.id);
console.log("disconnect", socket.id, loginID);
loginIDSet.delete(loginID);
loginIDMap.delete(loginID);
});
클라이언트는 초기 진입 시, login 메시지를 소켓 서버에 보낸다.
const init = () => {
socketIO.connect();
setLoginID(location.state.loginID);
socketIO.emit("login", location.state.loginID);
...
};
그리고 서버와 연결이 끊긴 경우, 로그아웃(home 으로 강제 이동)하였다.
const logout = () => {
window.alert("로그아웃 되었습니다.");
window.location.href = "/";
}
useEffect(() => {
if (!socketIO) return;
socketIO.on("disconnect", logout);
socketIO.on("respondMessage", respondMessageCallback);
return () => {
socketIO.off("respondMessage", respondMessageCallback);
};
}, []);
전체 코드는 다음과 같다.
socketIOServer.js
const { Server } = require("socket.io");
const loginIDSet = new Set();
const loginIDMap = new Map();
const io = new Server("3333", {
cors: {
origin: "http://localhost:3000",
},
});
io.sockets.on("connection", (socket) => {
socket.on("login", (loginID) => {
if(loginIDSet.has(loginID)) {
socket.disconnect();
return;
}
loginIDSet.add(loginID);
loginIDMap.set(socket.id, loginID);
});
socket.on("enter", (roomID) => {
socket.join(roomID);
console.log("enter", socket.rooms);
});
socket.on("leave", (roomID) => {
socket.leave(roomID);
console.log("leave", socket.rooms);
});
socket.on("sendMessage", (data) => {
let { message, roomID } = data;
console.log(socket.rooms);
socket.broadcast.in(roomID).emit("respondMessage", { message, roomID });
// console.log(loginIDMap); console.log(loginIDSet);
});
socket.on("disconnect", () => {
let loginID = loginIDMap.get(socket.id);
console.log("disconnect", socket.id, loginID);
loginIDMap.delete(loginID);
loginIDSet.delete(loginID);
});
});
ChatUI.js (Client)
import React, { useEffect, useState } from "react";
import { useLocation } from "react-router-dom";
import { io } from "socket.io-client";
import styles from "@chatscope/chat-ui-kit-styles/dist/default/styles.min.css";
import {
MainContainer,
ChatContainer,
MessageList,
Message,
MessageInput,
Avatar,
Sidebar,
ConversationList,
Conversation,
ConversationHeader,
VoiceCallButton,
VideoCallButton,
InfoButton,
MessageSeparator,
} from "@chatscope/chat-ui-kit-react";
let socketIO = io("http://localhost:3333", { autoConnect: false });
const AVATAR_IMAGE =
"https://img1.daumcdn.net/thumb/C428x428/?scode=mtistory2&fname=https%3A%2F%2Ftistory3.daumcdn.net%2Ftistory%2F4431109%2Fattach%2F3af65be1d8b64ece859b8f6d07fafadc";
const AVATAR_MAP = {
Lilly: "https://chatscope.io/storybook/react/assets/lilly-aj6lnGPk.svg",
Joe: "https://chatscope.io/storybook/react/assets/joe-v8Vy3KOS.svg",
Emily: "https://chatscope.io/storybook/react/assets/emily-xzL8sDL2.svg",
Akane: "https://chatscope.io/storybook/react/assets/akane-MXhWvx63.svg",
Eliot: "https://chatscope.io/storybook/react/assets/eliot-JNkqSAth.svg",
Zoe: "https://chatscope.io/storybook/react/assets/zoe-E7ZdmXF0.svg",
};
const defaultMessage = [];
const defaultMessagePatrik = [];
const totalMessages = [defaultMessage, defaultMessagePatrik];
const defaultConversation = [
{
info: "",
lastSenderName: "bloodstrawberry",
name: "bloodstrawberry",
src: AVATAR_IMAGE,
status: "available",
},
{
info: "",
lastSenderName: "Patrik",
name: "Patrik",
src: "https://chatscope.io/storybook/react/assets/patrik-yC7svbAR.svg",
status: "invisible",
},
];
const ChatUI = () => {
const location = useLocation();
const [loginID, setLoginID] = useState("");
const [activeID, setActiveID] = useState(0);
const [messages, setMessages] = useState(totalMessages);
const getMessageComponent = (totalMessages) => {
let data = totalMessages[activeID];
return data.map((item, index) => {
if(item.type !== "separator") {
item.model.direction = item.avatar.name === loginID ? "outgoing" : "incoming";
}
return item.type === "separator" ? (
<MessageSeparator key={index} content={item.content} />
) : (
<Message key={index} model={item.model}>
{item.avatar && item.model.direction === "incoming" ? (
<Avatar src={item.avatar.src} name={item.avatar.name} />
) : null}
</Message>
);
});
};
const changeRoom = (index) => {
if(activeID === index) return;
let leftSeparator = {
type : "separator",
content : `${loginID} has left the chatroom.`,
}
let enterSeparator = {
type : "separator",
content : `${loginID} has entered the chatroom.`,
}
let temp = [...totalMessages];
temp[activeID].push(leftSeparator);
temp[index].push(enterSeparator);
socketIO.emit("sendMessage", { message: leftSeparator, roomID: activeID });
socketIO.emit("leave", activeID);
socketIO.emit("enter", index);
socketIO.emit("sendMessage", { message: enterSeparator, roomID: index });
setMessages(temp);
setActiveID(index);
}
const getConversationComponent = (data) => {
return data.map((item, index) => {
return (
<Conversation
key={index}
active={index === activeID}
info={item.info}
lastSenderName={item.lastSenderName}
name={item.name}
onClick={() => changeRoom(index)}
>
<Avatar name={item.name} src={item.src} status={item.status} />
</Conversation>
);
});
};
const handleSend = (input) => {
let newMessage = {
model: {
message: input,
// direction: "outgoing",
},
avatar: {
src: AVATAR_MAP[loginID],
name: loginID,
},
};
let temp = [...totalMessages];
temp[activeID].push(newMessage);
setMessages(temp);
socketIO.emit("sendMessage", { message: newMessage, roomID: activeID });
};
const init = () => {
socketIO.connect();
setLoginID(location.state.loginID);
socketIO.emit("login", location.state.loginID);
let enterSeparator = {
type : "separator",
content : `${location.state.loginID} has entered the chatroom.`,
}
let temp = [...totalMessages];
temp[activeID].push(enterSeparator);
setMessages(temp);
socketIO.emit("enter", activeID);
socketIO.emit("sendMessage", { message: enterSeparator, roomID: activeID });
};
const respondMessageCallback = (data) => {
let { message, roomID } = data;
let temp = [...totalMessages];
temp[roomID].push(message);
setMessages(temp);
}
const logout = () => {
window.alert("로그아웃 되었습니다.");
window.location.href = "/";
}
useEffect(() => {
if (!socketIO) return;
socketIO.on("disconnect", logout);
socketIO.on("respondMessage", respondMessageCallback);
return () => {
socketIO.off("respondMessage", respondMessageCallback);
};
}, []);
useEffect(init, []);
return (
<div>
<Conversation
info="I'm fine, thank you, and you?"
lastSenderName={loginID}
name={loginID}
>
<Avatar name={loginID} src={AVATAR_MAP[loginID]} status="available" />
</Conversation>
<MessageSeparator style={{ marginTop: 5, marginBottom: 5 }} />
<MainContainer
responsive
style={{
height: "300px",
}}
>
<Sidebar position="left">
<ConversationList>
{getConversationComponent(defaultConversation)}
</ConversationList>
</Sidebar>
<ChatContainer>
<ConversationHeader>
<ConversationHeader.Back />
<Avatar
name={defaultConversation[activeID].name}
src={defaultConversation[activeID].src}
/>
{activeID === 0 ? (
<ConversationHeader.Content
info="Active 10 mins ago"
userName="bloodstrawberry"
/>
) : (
<ConversationHeader.Content
info="Active 7 hours ago"
userName="Patrik"
/>
)}
<ConversationHeader.Actions>
<VoiceCallButton />
<VideoCallButton />
<InfoButton />
</ConversationHeader.Actions>
</ConversationHeader>
<MessageList>
{getMessageComponent(messages)}
</MessageList>
<MessageInput placeholder="Type message here" onSend={handleSend} />
</ChatContainer>
</MainContainer>
</div>
);
};
export default ChatUI;
댓글