フリーランス 技術調査ブログ

フリーランス/エンジニア Ruby Python Nodejs Vuejs React Dockerなどの調査技術調査の備忘録

expressでsoket.ioでチャット機能を実装する

インストール

npm install socket.io

express側の設定

soke関連の記述

const express = require('express')
const socketio = require( 'socket.io' )

const app = express()
const server = app.listen(3000, () => console.log('Example app listening on port 3000!'))

// テンプレートエンジンはejsを利用します
app.set("view engine", "ejs");


// サーバーをソケットの紐づけ
var io = socketio.listen( server );

io.sockets.on( 'connection', function( socket ) {

    // 自分と接続している全員に送信する
    socket.on( 'c2s_message', function( data ) {
        // サーバーからクライアントへ メッセージを送り返し
        io.sockets.emit( 'message', { value : data.value } );
    });

    // 自分以外の接続している他のひとに送る
    socket.on( 'broadcast', function( data ) {
        // サーバーからクライアントへ メッセージを送り返し
        socket.broadcast.emit( 's2c_message', { value : data.value } );
    });
});

// chat画面の表示
app.get('/', function(req, res){
      res.render("index");
});

view(HTML)側の設定

    <div id="message"></div>
    <input type="text" id="messageInput">
    <button type="button" id="sendMessage">自分と接続しているみんなに送信</button>
    <button type="button" id="sendMessageBroadcast">自分以外の接続するみんなに送信</button>

   <script type="text/javascript" src="/src/jquery.min.js"></script>
  <script type="text/javascript" src="/socket.io/socket.io.js"></script>

    <script>
    var ioSocket = io.connect( "http://localhost:3000" ); 
    ioSocket.on( "connect", function() {} ); 
    ioSocket.on( "disconnect", function() {} ); 

    // サーバーからクライアントへの送り返し
    ioSocket.on( "message", function( data ) { appendMessage( data.value ) });

    // 画面にメッセージを追記
    function appendMessage( text ) {
        $("#message").append( "<div>" + text + "</div>" );
    }

    // 自分と接続している全員にコメントを送信
    $("#sendMessage").click( function() {

        // メッセージの内容を取得し、その後フォームをクリア
        var message = $("#messageInput").val();
        $("#messageForm").val("");

        // クライアントからサーバーへ送信
        ioSocket.emit( "message", { value : message } );
    });

    // 自分以外の接続しているユーザーにコメントを送信
    $("#sendBroadcast").click( function() {

        // メッセージの内容を取得し、その後フォームをクリア
        var message = $("#messageInput").val();
        $("#messageInput").val("");

        // クライアントからサーバーへ送信
        ioSocket.emit( "broadcast", { value : message } );
    });

    </script>