socket.io

https://poiemaweb.com/nodejs-socketio

HTML5의 web socket은 유용한 기술이지만
오래된 브라우저의 경우엔 지원하지 않을 수 있다

WebSocket은 사용자의 브라우저와 서버 사이의 동적인 양방향 연결 채널을 구성하는 HTML5 프로토콜이다. WebSocket API를 통해 서버로 메시지를 보내고 요청 없이 응답을 받아오는 것이 가능하다.

HTTP는 클라이언트에 의해 초기화되기 때문에
서버가 변경사항을 클라이언트에게 알릴 수 있는 방법이 없지만 WebSocket의 연결은 HTTP 통신과는 다르게 클라언트가
특정 주기를 가지고 Polling하지 않아도 변경된 사항을 시기 적절하게 전달할 수 있는 지속적이고 완전한 양방향 연결 스트림을 만들어 주는 기술이다.

브라우저 간 호환이나 이전 버전을 위해서 Node.js를 위한 cross platform web socket API인 socket.io를 사용하는 것이 바람직

socket.io 사용법

emit을 통해 신호를 보내고, on을 통해 신호를 받는다

// 접속된 모든 클라이언트에게 메시지를 전송한다
io.emit('event_name', msg);

// 메시지를 전송한 클라이언트에게만 메시지를 전송한다
socket.emit('event_name', msg);

// 메시지를 전송한 클라이언트를 제외한 모든 클라이언트에게 메시지를 전송한다
socket.broadcast.emit('event_name', msg);

// 특정 클라이언트에게만 메시지를 전송한다 - id는 socket 객체의 id 속성값
io.to(id).emit('event_name', data);

nextron 에서 socket.io 사용하기

node/express 환경에서

// server.js
const app = require("express")();
const server = require("http").createServer(app);
// http server를 socket.io server로 upgrade한다
const io = require("socket.io")(server, {
  cors: {
    origin: "*",
  },
});

// localhost:3000으로 서버에 접속하면 클라이언트로 index.html을 전송한다
app.get("/", function (req, res) {});

// connection event handler
// connection이 수립되면 event handler function의 인자로 socket인 들어온다
io.on("connection", function (socket) {
  // 접속한 클라이언트의 정보가 수신되면
  console.log("hi");
  socket.emit("hello", "hello");
});

server.listen(3000, function () {
  console.log("Socket IO server listening on port 3000");
});

electron.js에서는 이미 자체적으로 node.js 로 서버가 구성돼있기 때문에.. 쉽지 않았다

정답은 돌고 돌아 공식문서

https://socket.io/docs/v4/

socket.io 에서 서버를 제공하고 있었다

import { Server } from "socket.io";

// cors 설정을 안해주면 react에서 막힌다
const io = new Server(3000, {
  cors: {
    origin: "*",
  },
});

import serve from "electron-serve";
import { createWindow } from "./helpers";
import { app } from "electron";

const isProd: boolean = process.env.NODE_ENV === "production";

import { Server } from "socket.io";

const io = new Server(3000, {
  cors: {
    origin: "*",
  },
});

io.on("connection", function (socket) {
  console.log("hi");
  socket.emit("hello", "hello");
});

if (isProd) {
  serve({ directory: "app" });
} else {
  app.setPath("userData", `${app.getPath("userData")} (development)`);
}

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

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

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


app.on("window-all-closed", () => {
  app.quit();
});