expressとsocket.ioを使った簡単なチャットアプリ

まえがき

こたつが欲しいです

はじめに

何番煎じかわかりませんが、expressの使い方を学ぶために簡単なチャットアプリを作りました。

作るべ

下準備

とりあえず、npmで必要なモジュールを入れます タイトルどおり、expressとsocket.ioを用意します。

npm init -y
npm i express --save
npm i socket.io --save

expressで供給するのは静的ファイルで十分なので、提供用のフォルダを用意します。
ここではpublicフォルダを作成し、その中にcss、jsフォルダを作ります。

┬index.js
├package.json
└public/┬index.html
　  　 　├css/─style.css
　  　 　└js/─easychatpress.js

こんな感じ

サーバ側(index.js)

だいたい

const path = require('path');
const express = require('express');
const app = express();
const http = require('http').Server(app);

const io = require('socket.io')(http);
const PORT = process.env.PORT || 3000;

app.use('/',express.static(__dirname + '/public'));

io.on('connection',socket=>{
    socket.on('message',data=>{
        console.log(`${data.user}:${data.text}`)
        io.emit('message',data)//ioでemitすることで接続者全員にブロードキャスト
    })
    socket.on('userdisconnet',user=>{
        console.log(`Disconnect User ${user}`);
        io.emit('userdisconnet',user);
    })
    socket.on('username',user=>{
        console.log(`Connect User ${user}`);
        io.emit('username',user);
    })
})

http.listen(PORT, () => {
  console.log(`listening on localhost:${PORT}`);
});

publicフォルダを静的ファイルとして提供する。

app.use('/',express.static(__dirname + '/public'));

基本的にサーバから特別にemitすることはないので、各socketのイベントをブロードキャストする。

io.on('connection',socket=>{
    socket.on('message',data=>{
        console.log(`${data.user}:${data.text}`)
        io.emit('message',data)//ioでemitすることで接続者全員にブロードキャスト
    })
    socket.on('userdisconnet',user=>{
        console.log(`Disconnect User ${user}`);
        io.emit('userdisconnet',user);
    })
    socket.on('username',user=>{
        console.log(`Connect User ${user}`);
        io.emit('username',user);
    })
})

クライアントから接続されると、"connection"がioにemitされる。
このときに、各クライアントのsocketを取得できる。
あるユーザに対してDMのようなものを送るならば、このsocketにemitすればいい。

クライアント側(public/easychatpress.js)

長いので一部のみ

    socket = io();

で、socket.ioを使った接続を開始する。
データの受信は
socket.on('イベント名',(受け取ったデータ)=>{});
送信は
socket.emit('イベント名',送るデータ);
で行うことができる。

完成品

github.com

お疲れ様でしたぁ～