Socket.ioでサーバとのリアルタイム通信を行う

2020.7.18

個人的にWebSocketを使うことになり、環境構築したのでそのメモです。

Socket.IOのサイトのGet startedを参考に環境構築していきます。このサイトに沿ってやれ

Get started | Socket.IO

node.jsでサーバを動かす(TypeScript, express)

こちらの記事でnode.jsでTypeScriptを動かす環境を用意します。

TypeScriptでExpress(node.js)を動かす | blog.kwst.site

以下のコマンドでTypeScript、expressを動かします。

yarn add -D @types/express @types/node ts-node ts-node-dev typescript
yarn add express

main.tsはこんな感じ

import express from "express";
const app = express();

const PORT = process.env.PORT || 8080;

app.get("/", (_req, res) => {
  res.send(`
    <h1>TypeScript Express</h1>
`);
});

app.listen(PORT, () => {
  console.log(`Server listening on port ${PORT}...`);
});

socket.ioでリアルタイム通信する

socket.ioをインストールして単純な疎通確認をしてみます。

型定義もインストールしましょう。

yarn add socket.io
yarn add -D  @types/socket.io

main.tsはこんな感じです。socket.ioにhttpモジュールを渡す必要があるところがポイントです。

import express from "express";
import http from "http";
import socketIo from "socket.io";
const app = express();

const httpServer = http.createServer(app);
const io = socketIo(httpServer);

const PORT = process.env.PORT || 8080;

app.get("/", (_req, res) => {
  res.sendFile(__dirname + "/index.html");
});

httpServer.listen(PORT, () => {
  console.log(`Server listening on port ${PORT}...`);
});

io.on("connection", (socket) => {
  console.log("a user connected");
  socket.on("disconnect", () => {
    console.log("user disconnected");
  });
});

返すHTMLには以下のスクリプトを追加します。

<script src="/socket.io/socket.io.js"></script>
<script>
  var socket = io();
</script>

これで実行してリロードするたびに下記のようなログが出れば疎通できています。

Server listening on port 8080...
a user connected
user disconnected
a user connected
user disconnected
a user connected
user disconnected
a user connected

メッセージを他のユーザに送信する

メッセージを他のユーザに送信するには、emitメソッドを使います。

Server API emit | Socket.IO

main.tsで下記のようにemitメソッドを使います。するとちゃんと他のユーザにも送信できます。

socket.on("chat message", (msg) => {
  console.log("message: " + msg);
  io.emit("chat message", msg);
});

HTMLの方ではイベントを監視するだけです。結構かんたんですね。

socket.on("chat message", function (msg) {
  // any action
});

ただ、これでは自分に対しても送信されてしまいます。自分に対して送信しない場合はbroadcastを使います。

Server API broadcast | Socket.IO

socket.broadcast.emit("chat message", msg);

サンプルコードの置き場所

今回のサンプルコードはこちらの置いておきました。

sandbox/socketio-practice at master · SatoshiKawabata/sandbox · GitHub

© 2019-2024 kwst.site.