Nextron/Electron ipc통신으로 유저목록 생성

1. 창 2개 띄우기 - electron

현재는 dev툴만 뜨기 때문에 클라이언트 2개를 띄우기 번거롭다. 다음과 같이 subWin을 하나 만들어서 실행히 자동으로 창이 2개 뜨도록 해준다.

(async () => {
  await app.whenReady();

  const mainWindow = createWindow('main', {
    width: 1000,
    height: 600,
  });

  //새 창 만들기
  const subWin = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }
  })

  if (isProd) {
    await mainWindow.loadURL('app://./home.html');
  } else {
    const port = process.argv[2];
    await mainWindow.loadURL(`http://localhost:${port}/home`);
    //호출하기
    await subWin.loadURL(`http://localhost:${port}/home`);
    mainWindow.webContents.openDevTools();
  }
})();

---

2. ipc통신

일렉트론의 main process(back)와 renderer process(front) 사이 통신으로 ipc모듈을 사용한다.

🏷️ main에서는 ipcMain을 사용해 데이터를 송,수신 한다.
import { ipcMain } from 'electron';
데이터를 받기 위해 on함수를 사용해 채널을 수신하고, 새 메시지는 listener로 받는다. listener는 listener(evt, arg)로 호출한다.

ipcMain.on(channer, listener);

응답하기 위해서는 evt.sender.send()를 호출한다.

ipcMain.on(channer, (evt, arg) => {	
  evt.sender.send('reply', '답장');
})

🏷️ renderer에서는 ipcRenderer을 사용해 데이터를 송수신 한다.
import { ipcRenderer } from 'electron';
데이터를 전달하기 위해 send함수를 사용하고, 채널을 통해 메시지를 보낸다

ipcRenderer.render(channer, '클라이언트가 보냄');

응답받기 위한 listener는 listener(evt, arg)로 호출한다.

ipcRenderer.on(channer, (evt, arg) => {
  console.log(arg);	//서버가 보낸 응답
})

---

3. 유저 접속 시 서버에 알리기

새로운 유저가 접속되면 서버가 클라이언트를 호출해 유저목록을 갱신하도록 할 것이다. 그러기 위해 새로운 유저가 접속(회원가입/로그인)하면 서버에 알려주려 한다.

닉네임을 생성하고나면 /chatList로 이동하게 된다. 그럼 다음 코드를 통해 유저가 회원가입/로그인이 성공적으로 완료되었음을 서버에 알려준다. 이때 uid를 함께 전달해준다. (식별하기 위해)

// /chatlist
ipcRenderer.send('login', user['uid']);

서버는 다음 코드를 통해 클라이언트로부터 메시지를 받게 된다.

// /background
ipcMain.on('login', (evt, arg) => {
  console.log('새로운 접속:', arg);
)};

새로운 유저가 들어오면 모든 클라이언트들은 유저 목록을 업데이트 해야 한다. 그러기 위해서는 배열을 통해 생성된 모든 채널 정보를 가지고 있어야 한다.

const chn = [];

ipcMain.on('login', (evt, arg) => {
  console.log('새로운 접속:', arg);

  chn.push(evt);

});

새로운 유저가 들어오면 모든 채널에게 새로운 유저가 왔음을 알린다.

const chn = [];

ipcMain.on('login', (evt, arg) => {
  console.log('새로운 접속:', arg);

  chn.push(evt);

  chn.map((value) => {
    value.sender.send('login', '새로운 유저 접속!');
  })
});

새로운 유저가 들어오면 getLogin을 통해 firestore로 부터 유저의 닉네임을 알아낸다.

// /chatList
  ipcRenderer.on('login', (evt, arg) => {
    console.log(arg);
    getLogin();
  });

  const [loginUser, setLoginUser] = React.useState(['']);

  const getLogin = async () => {
    const q = query(collection(db, "user"), where("state", "!=", "logout"));
    const querySnapshot = await getDocs(q);
    var getUser = [];
    querySnapshot.forEach((doc) => {
      getUser.push(doc.data().nick);
    });
    setLoginUser(getUser);
  }

이때 유저의 상태가 logout이 아닌 유저만 가져온다. (유저의 로그인 여부를 위해 state속성을 미리 추가) 가져온 정보는 loginUser에 저장하고, map을 통해 유저 목록을 렌더링하면 된다.

🙇🏻‍♀️📂
사이버이메지네이션 기술블로그 - ipc통신