【Socket.io】HTTP上で使用していたCookieの情報をWebSocketで使用する方法

背景

WebSocketでも、HTTPと同様にcookieの情報を授受できるようにしたかったが、それなりに苦戦したため、備忘録程度に記事として残しておきます。
WebSocket上のcookieの授受だけでなく、 HTTP 上で使用していたcookieの送信も可能になるため、開発の柔軟性が上がるかと思います。

今回は Express.js と Svelte、socket.io を使用して行っています。

結論

CORSの設定をしてあげることでcookieの情報授受が可能になりました。
socketの初期化時に、オプション項目で withCredentials または credentials というのがあるので、それらを true にすることでcookieの送受信が可能になります。

• クライアントサイド

+page.svelte

<script lang="ts">
  import { io } from 'socket.io-client';

  const socket = io(`ws://localhost:3000`, {
    withCredentials: true, // 先頭にwithが必要
  })
</script>

• サーバーサイド

index.ts

import express from 'express';
import { createServer } from 'http';
import { Server } from 'socket.io';

const app = express();
const server = createServer(app);
const port = 3000;
const io = new Server(server, {
  cors: {
    origin: 'http://localhost:8080',
    credentials: true, // NOTE: サーバー側ではwithはいらない(2024/10/17現在)
  },
  // ちなみに下の設定を行うことで、WebSocket上のCookieもこちらで設定ができるみたいです（確認していないのでわからないが）
  // この設定がなくてもHTTP上のcookieは使用できます
  cookie: {
    name: '_socket_session_id',
  },
})

参考文献