socket.io

インストール

npm i socket.io

サーバ

const express = require("express");
const app = express();
const http = require("http");
const server = http.createServer(app);
const io = require("socket.io")(server);
//接続された時の処理
io.on("connection", (socket) => {
    console.log("ユーザが接続しました");
    //クライアントからのイベント
    socket.on("chat message", msg => {
        //サーバから各クライアントへ
        io.emit("chat message", msg)
    })
});

クライアント

    <ul id="messages"></ul>
    <form id="form" action="">
        <input id="input" autocomplete="off" /><button>Send</button>
    </form>

    <!--ソケットモジュールを呼び出し-->
    <script src="/socket.io/socket.io.js"></script>

    <script>
        //接続
        let socket = io();
        const form = document.getElementById("form");
        const input = document.getElementById("input");
        const messages = document.getElementById("messages");

        form.addEventListener("submit", function (e) {
            e.preventDefault();
            if (input.value) {
                //クライアントからサーバへ
                socket.emit("chat message", input.value);
                input.value = "";
            }
        });

        //サーバから
        socket.on("chat message", function (msg) {
            let item = document.createElement("li");
            item.textContent = msg;
            messages.appendChild(item);
        });

     </script>

コメントする