일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 |
- Access Key 생성
- react native 개발
- img upload
- Project
- PongWorld
- fire base
- Next.js
- GIT
- 문자열 대소문자
- AWS Access Key
- 리엑트 네이티브 아이콘
- react native CLI
- 리액트 네이티브 에러
- react native font
- firebase 라이브러리
- 문자열 대소문자 구별
- react native 세팅
- 리액트 네이티브
- 백준
- aws bucket 정책
- js
- react native
- React
- error
- 에러
- 리액트
- s3 upload
- babel.config.js
- react native picker
- AWS
- Today
- Total
밝을희 클태
[ JavaScript / JS ] WebSocket 연결하고 실시간 채팅 구현하기 본문
지금 Pong게임을 할 수 있는 팀프로젝트를 진행을 하고 있는데
Pong Game
Welcome to PongGame.org, In this site, you can find many free versions of the game, one of the first video games ever created. In the game below, use the mouse or keyboard to control the paddle, Press P to pause the game, or ESC to go back to the main menu
www.ponggame.org
프로젝트에서 내 첫번째 역할은 실시간 채팅이 가능하도록 채팅 기능을 만드것이다. 실시간 채팅을 구현하기 위해서는 webSocket을 사용해야 한다. 백엔드에서 webSocket 서버를 다 구성해서 이제 프론트인 내가 백앤드에서 만들어둔 webSocket을 이용해 실시간 채팅을 구현해야 한다
socket
웹소켓(WebSocket)은 실시간 웹 애플리케이션 개발에 필수적인 기술입다. 복잡한 실시간 통신 요구사항을 가진 애플리케이션을 구현할 때 HTTP 프로토콜의 한계를 극복하고, 서버와 클라이언트 간에 양방향 통신 채널을 제공한다.
일단 웹소켓 연결을 먼저 해야한다. 소켓은 3개로 구성돼 있다 프로토콜(ws), ip 주소(127.0.0.1), 포트 넘버(8000)
chatSocket = new WebSocket(
'ws://' + '127.0.0.1:8000'
);
웹소켓 연결의 상태를 관리하기 위해 onopen, onmessage, onerror, onclose 이벤트 핸들러를 구현할 수 있다.
- onopen: 웹소켓 연결이 성공적으로 열렸을 때 실행
- onmessage: 서버로부터 메시지를 받았을 때 실행
- onerror: 연결 중 오류가 발생했을 때 실행
- onclose: 연결이 닫혔을 때 실행
아래는 우리 프로젝트의 웹소켓을 연결하는 부분의 코드다
혹시나 일시적인 네트워크 에러등 으로 웹소켓 연결에 실패했을 경우를 생각해서 2초마다 최대 5번 웹소켓 연결을 시도한다
let retryCount = 0;
const maxRetry = 5;
const retryDelay = 2000; // 2초
let chatSocket = null;
function connectWebSocket() {
chatSocket = new WebSocket(
'ws://' + '127.0.0.1:8000' + '/ws/chat/' + 'public' + '/',
);
chatSocket.onerror = function () {
if (retryCount < maxRetry) {
setTimeout(() => {
console.log(`연결 실패. ${retryCount + 1}번째 재연결 시도 중...`);
retryCount++;
connectWebSocket();
}, retryDelay);
} else {
console.log('WebSocket 연결에 실패했습니다. 잠시 후 다시 시도해주세요.');
}
};
chatSocket.onopen = function () {
console.log('WebSocket 연결 성공');
retryCount = 0;
};
}
connectWebSocket();
웹소켓을 연결하고 이제 실시간 채팅을 구현해야 한다
사용자가 메세지를 입력하면 사용자의 아이디와 메시지 내용을 소켓에게 전송해 준다.
chatSocket.send(
JSON.stringify({
sender_id: senderID,
message: chattingInput.value,
}),
);
그리고 onmessage 이벤트를 이용하면, 서버로부터 메시지를 받을 때마다 이 이벤트가 발생한다. 이를 통해, 한 사용자가 채팅을 입력하고 서버로 전송하면 (send메서드 사용), 서버는 이 메시지를 처리하고 다른 모든 사용자에게 해당 메시지를 전송할 수 있다. 다른 사용자들은 onmessage 이벤트를 통해 이 메시지를 실시간으로 받아볼 수 있다.
아래는 내가 구현한 onmessage 이벤트다.
내가 보낸 메시지면 sender_id를 비교해서 오른쪽으로 정렬해서 메시지를 뜨게 하고 아니면 다 왼쪽으로 정렬을 했다.
chatSocket.onmessage = e => {
const data = JSON.parse(e.data);
const opponentName = document.createElement('div');
const newMsg = document.createElement('div');
newMsg.style.color = 'black';
if (Number(data.sender_id) === Number(senderID)) {
newMsg.textContent = data.message;
newMsg.setAttribute('class', 'myChat');
$chatRoom.appendChild(newMsg);
$chatRoom.scrollTop = $chatRoom.scrollHeight;
chattingSubmitImage.setAttribute('fill', '#ddd');
} else {
opponentName.textContent = data.sender_name;
opponentName.style.color = 'black';
opponentName.style.marginBottom = '-10px';
newMsg.textContent = data.message;
newMsg.setAttribute('class', 'friendChat');
$chatRoom.appendChild(opponentName);
$chatRoom.appendChild(newMsg);
$chatRoom.scrollTop = $chatRoom.scrollHeight;
}
};
결과물
'JavaScript' 카테고리의 다른 글
[JS / JavaScript] 전연 객체란 무엇일까? (0) | 2024.03.07 |
---|---|
[JS / JavaScript] var, let, const 의 차이 (0) | 2024.03.07 |
[ JS / javaScript ] target 과 currentTarget의 차이 (0) | 2024.02.18 |
[ JS / JavaScript ] 좋은 DOM 검색 방법 (1) | 2024.02.16 |
[JS / JavaScript] splice, slice 메소드 차이 (0) | 2024.01.16 |