2탄은 현재 접속자가 누구인지에 대한 현황판을 만들어 보았다.
어떻게해야 들어온 사람을 기억하고 나간사람을 명단에서 없앨 수 있을까 라고 생각을 해본 결과
처음 입장시 서버에 배열을 생성하여 들어온 사람들의 이름을 저장하였고 그 이름을 유저들에게 보내주어 현재 접속자를 보여주었다.
그리고 나간사람이 발생할 시 즉, disconnect된 유저가 발생시 새로운 배열을 서버쪽으로 반환해 주었다.
문제점
- 만들고보니 다른 유저들에게는 정상적으로 보이지만 나에게는 몇몇 유저들의 이름이 중복되는 현상발견.
- 배열에서 한명한명씩 관리하다보니 순서가 이상해지는 것
이것을 해결하기 위한방법을 고민하다가 예전 상태의 배열을 없애고 새로운 배열을 다시 리로드 해주는 방법을 선택했다.
이것은 딱히 좋은 방법은 아닌것 같아 다음에 다시한번 고쳐봐야할 필요성이 있는것 같다.
이제 위의 문제점과 함께 코드를 보도록 하자.
서버측
let arr = [];
socket.on('User name', function(name) {
if(name !== null) {
user = name;
arr.push(name); // reload 고쳐야함. 아직 작동안함.
io.to(socket.id).emit('create name', name);
io.emit('connect message', name, socket.id);
io.emit('real time user', name, arr, socket.id); <= 배열을 전송하는 부분
}
});유저측
socket.on('real time user', function(name ,name_list, socketId) {
if(socket.id !== socketId) {
user_count = name_list;
const user = _.$create('div');
user.id = `user_${socketId}`
_.addHTML(user, `<div id="${socketId}" class="user_name">${name}</div>`);
_.nodeCount(user_name[0]) < 10 ? _.append(user_name[0],user) : _.append(user_name[1], user);
} else {
while(user_name[0].hasChildNodes()) {
user_name[0].removeChild(user_name[0].firstChild);
}
while(user_name[1].hasChildNodes()) {
user_name[1].removeChild(user_name[1].firstChild);
}
user_count = name_list;
name_list.forEach(v => {
const user = _.$create('div');
_.addHTML(user, `<div class="user_name">${v}</div>`);
_.nodeCount(user_name[0]) < 10 ? _.append(user_name[0],user) : _.append(user_name[1], user);
})
}
});
if(socket.id !== socketId) 이 부분은 다른 유저가 아닌 나 본인일 경우를 뜻한다. 내가 들어간 시점에서 다른유저들이 들어오고 나가는 경우를 실시간으로 반영하기 때문에 나에게 보여주는 배열은 전부다 리로드를 할 필요성이 없었다.
하지만 새롭게들어오는 유저들은 그 전에 접속해 있던 유저들을 파악하려면 전부 새롭게 배열을 넣어주어야했다.
그 부분이 else부분이다.
forEach문으로 전부다 새롭게 배열을 추가해줬다.
아직까지도 여러명이 한꺼번에 폭발적으로 들어오면 버그가 발생한다.
특히 새로고침을 했을경우 null이 접속되는 경우,
한번들어왔다가 새로고침하여 이름을 변경할 경우 그 전의 닉네임이 남아있는 경우... 등등..
아직까지 리로드 될때의 상황을 어떻게 컨트롤할 수 있는지 좀 더 공부해 봐야 알것같다.
어쩌면 이벤트발생시 preventDefault()로 막을 수 있을지도?...
