참고
- chat-ui-kit-react로 채팅창 UI 만들기
- 로그인 + 채팅방 UI 만들기
- 채팅방 변경하기
- 채팅방 들어오고 나갈 때 표시하기
- Socket.IO로 채팅하기
- Socket.IO Room으로 채팅방 관리하기
- Socket.IO namespace로 채팅방 관리하기
- Socket.IO로 중복 로그인 제한하기
- Socket.IO Middleware로 중복 로그인 방지하기
Socket.IO를 이용해서 실시간 채팅을 구현해 보자.
구현
이전 글에서 구현한 채팅방은 bloodstrawberry와 Patrik (id 0, 1)이 있다.
편의상 존재하는 방은 빈방이고, 로그인 한 사용자는 id 0인 방으로 입장한다고 가정한다.
먼저 socket.io-client 라이브러리를 설치한다.
npm install socket.io-client
자동으로 연결되는 것을 방지하기 위해 autoConnet를 false로 설정해 socketIO 객체를 만든다.
import { io } from "socket.io-client";
let socketIO = io("http://localhost:3333", { autoConnect: false });
init에서 connect 메서드를 이용해 Socket 서버와 연결한다.
const init = () => {
socketIO.connect();
...
};
소켓 서버에 대한 응답을 받기 위해 respondeMessageCallback 메서드를 아래와 같이 만든다.
다른 로그인 유저가 메시지를 보내면 응답을 받아서 채팅 메시지가 추가된다.
const respondMessageCallback = (message) => {
let temp = [...totalMessages];
temp[activeID].push(message);
setMessages(temp);
}
useEffect(() => {
if (!socketIO) return;
socketIO.on("respondMessage", respondMessageCallback);
return () => {
socketIO.off("respondMessage", respondMessageCallback);
};
}, []);
direction은 자기 자신인 경우 outgoing, 그렇지 않으면 incoming이 되고,
다른 유저도 아바타 이미지를 알기 위해 avatar 정보도 추가하였다.
해당 메시지를 socket 서버의 sendMessage로 emit한다.
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", newMessage);
};
이제 message는 separator가 아닌 경우,
avatar의 name을 loginID와 비교하여 outgoing / incoming을 판단하면 된다.
그리고 incoming인 경우만 Avatar를 보여주도록 한다.
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>
);
});
};
로그인 한 유저가 들어올 때, init에서 separator를 추가하였으므로, init에도 sendMessage를 추가하면 된다.
const init = () => {
socketIO.connect();
...
socketIO.emit("sendMessage", enterSeparator);
};
소켓 서버는 전달 받은 메시지를 메시지를 보낸 클라이언트를 제외한 모든 클라이언트에게 보낸다. (broadcast)
클라이언트에서 sendMessage를 emit하였으므로, on을 sendMessage로 하였다.
const { Server } = require("socket.io");
const io = new Server("3333", {
cors: {
origin: "http://localhost:3000",
},
});
io.sockets.on("connection", (socket) => {
socket.on("sendMessage", (message) => {
socket.broadcast.emit("respondMessage", message);
});
socket.on("disconnect", () => {
});
});
참고 : 만약 특정 클라이언트에게 메시지를 보내고 싶다면 io.to를 이용하면 된다.
io.socekts.to(clientID).emit("message", { ... });
전체 코드는 다음과 같다.
socketIOServer.js
const { Server } = require("socket.io");
const io = new Server("3333", {
cors: {
origin: "http://localhost:3000",
},
});
io.sockets.on("connection", (socket) => {
socket.on("sendMessage", (message) => {
socket.broadcast.emit("respondMessage", message);
});
socket.on("disconnect", () => {
});
});
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);
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", newMessage);
};
const init = () => {
socketIO.connect();
setLoginID(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("sendMessage", enterSeparator);
};
const respondMessageCallback = (message) => {
let temp = [...totalMessages];
temp[activeID].push(message);
setMessages(temp);
}
useEffect(() => {
if (!socketIO) return;
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;
'개발 > React' 카테고리의 다른 글
리액트, Node JS - Socket.IO namespace로 채팅방 관리하기 (Managing Chat Room using namespace) (0) | 2024.04.01 |
---|---|
리액트, Node JS - Socket.IO Room으로 채팅방 관리하기 (Managing Chat Room) (0) | 2024.04.01 |
리액트 - 채팅방 들어오고 나갈 때 표시하기 (Message Separator) (0) | 2024.03.31 |
리액트 - 채팅방 변경하기 (Change Chat Room) (0) | 2024.03.29 |
리액트, Node JS - Socket.IO로 로그인 유저 관리하기 (Managing Logged-in Users with Socket.IO) (0) | 2024.03.27 |
댓글