Socket.io-練習(設定)

設定→サーバー

import http from 'http';
import { Server } from 'socket.io';
import express from 'express';
import { instrument } from '@socket.io/admin-ui';

const app = express();

app.set('view engine', 'pug');
app.set('views', __dirname + '/views');
app.use('/public', express.static(__dirname + '/public'));
app.get('/', (_, res) => res.render('home'));
app.get('/*', (_, res) => res.redirect('/'));

const httpServer = http.createServer(app);
const wsServer = new Server(httpServer, {
  cors: {
    origin: ['https://admin.socket.io'],
    credentials: true,
  },
});
instrument(wsServer, {
  auth: false,
});

設定-クライアント(HTML)

doctype html
html(lang="en")
    head
        meta(charset="UTF-8")
        meta(http-equiv="X-UA-Compatible", content="IE=edge")
        meta(name="viewport", content="width=device-width, initial-scale=1.0")
        title Noom
        link(rel="stylesheet", href="https://unpkg.com/mvp.css")
    body
        header
            h1 Noom
        main
            div#welcome
                form
                    input(placeholder="room name", required, type="text" id="roomName")
                    input(placeholder="nickname", required, type="text" id="nickname")
                    button Enter Room
         
            div#roomList Room List
                ul

            div#room
                h3
                h2 
                ul
                form#msg
                    input(placeholder="message", required, type="text")
                    button Send
        script(src="/socket.io/socket.io.js") 
        script(src="/public/js/app.js") 

設定-クライアント(JS)

const socket = io();