05．メッセージにメッセージ時刻を加える

サーバーから、接続しているすべてのクライアントへ、メッセージ拡散する際に、メッセージ時刻を付加する処理を作成します。

解説

メッセージに時刻を加えることに関する処理は、以下です。

1. サーバー側で動作するプログラムの、メッセージを全員に送信する処理で送信するデータに、現在時刻情報を付加する。( const objMessage = {strMessage: strMessage,strDate: strNow} )
2. クライアント側で動作するプログラムの、メッセージを受信する処理の、メッセージリストに追加する文字列に、現在時刻情報を付加する。

準備

04．を実施していない場合は、まず、04．を実施します。

サーバー側の処理

「server.js」 の定数の定義の下に、「時刻文字列の取得」と「数字を２桁の文字列に変換」の関数の定義を追加します。
// 関数 // 数字を２桁の文字列に変換 const toDoubleDigitString = ( num ) => { return ( "0" + num ).slice( -2 ); // slice( -2 )で後ろから２文字取り出す。 }; // 時刻文字列の作成（書式は「YY/DD/MM hh:mm ss」） const makeTimeString = ( time ) => { return toDoubleDigitString( time.getFullYear() ) + '/' + toDoubleDigitString( time.getMonth() + 1 ) + '/' + toDoubleDigitString( time.getDate() ) + ' ' + toDoubleDigitString( time.getHours() ) + ':' + toDoubleDigitString( time.getMinutes() ) + ' ' + toDoubleDigitString( time.getSeconds() ); }

「server.js」 の「新しいメッセージ受信時の処理」の中の「送信元を含む全員に送信」の処理を、「メッセージ文字列」の送信から、「メッセージオブジェクト」の送信に変更します。
「メッセージオブジェクト」の内容が、「メッセージ文字列」と「現在時刻文字列」になるように処理を追加します。
// 現在時刻の文字列の作成 const strNow = makeTimeString( new Date() ); // メッセージオブジェクトの作成 const objMessage = { strMessage: strMessage, strDate: strNow } // 送信元含む全員に送信 //io.emit( 'spread message', strMessage ); io.emit( 'spread message', objMessage );

「server.js」 全体としては、以下のようにします。
'use strict'; // モジュール const express = require( 'express' ); const http = require( 'http' ); const socketIO = require( 'socket.io' ); // オブジェクト const app = express(); const server = http.Server( app ); const io = socketIO( server ); // 定数 const PORT = process.env.PORT || 1337; // 関数 // 数字を２桁の文字列に変換 const toDoubleDigitString = ( num ) => { return ( "0" + num ).slice( -2 ); // slice( -2 )で後ろから２文字取り出す。 }; // 時刻文字列の作成（書式は「YY/DD/MM hh:mm ss」） const makeTimeString = ( time ) => { return toDoubleDigitString( time.getFullYear() ) + '/' + toDoubleDigitString( time.getMonth() + 1 ) + '/' + toDoubleDigitString( time.getDate() ) + ' ' + toDoubleDigitString( time.getHours() ) + ':' + toDoubleDigitString( time.getMinutes() ) + ' ' + toDoubleDigitString( time.getSeconds() ); } // 接続時の処理 // ・サーバーとクライアントの接続が確立すると、 // 　サーバー側で、'connection'イベント // 　クライアント側で、'connect'イベントが発生する io.on( 'connection', ( socket ) => { console.log( 'connection' ); // 切断時の処理 // ・クライアントが切断したら、サーバー側では'disconnect'イベントが発生する socket.on( 'disconnect', () => { console.log( 'disconnect' ); } ); // 新しいメッセージ受信時の処理 // ・クライアント側のメッセージ送信時の「socket.emit( 'new message', $( '#input_message' ).val() );」に対する処理 socket.on( 'new message', ( strMessage ) => { console.log( 'new message', strMessage ); // 現在時刻の文字列の作成 const strNow = makeTimeString( new Date() ); // メッセージオブジェクトの作成 const objMessage = { strMessage: strMessage, strDate: strNow } // 送信元含む全員に送信 //io.emit( 'spread message', strMessage ); io.emit( 'spread message', objMessage ); } ); } ); // 公開フォルダの指定 app.use( express.static( __dirname + '/public' ) ); // サーバーの起動 server.listen( PORT, () => { console.log( 'Server on port %d', PORT ); } );

クライアント側の処理

「public/client.js」 の「サーバーからのメッセージ拡散に対する処理」を、「メッセージ文字列」を受け取る処理から、「メッセージオブジェクト」を受け取る処理に変更します。
リストに追加するメッセージを、「メッセージ文字列」から「メッセージ時刻とメッセージ文字列を結合した文字列」に変更します。
// サーバーからのメッセージ拡散に対する処理 // ・サーバー側のメッセージ拡散時の「io.emit( 'spread message', strMessage );」に対する処理 socket.on( 'spread message', //( strMessage ) => ( objMessage ) => { //console.log( 'spread message :', strMessage ); console.log( 'spread message :', objMessage ); // メッセージの整形 const strText = objMessage.strDate + ' - ' + objMessage.strMessage; // 拡散されたメッセージをメッセージリストに追加 //const li_element = $( '<li>' ).text( strMessage ); const li_element = $( '<li>' ).text( strText ); $( '#message_list' ).prepend( li_element ); // リストの一番上に追加 //$( '#message_list' ).append( li_element ); // リストの一番下に追加 } );

「public/client.html」全体としては、以下のようにします。
// クライアントからサーバーへの接続要求 const socket = io.connect(); // 接続時の処理 // ・サーバーとクライアントの接続が確立すると、 // 　サーバー側で、'connection'イベント // 　クライアント側で、'connect'イベントが発生する socket.on( 'connect', () => { console.log( 'connect' ); } ); // 「Send」ボタンを押したときの処理 $( 'form' ).submit( () => { console.log( '#input_message :', $( '#input_message' ).val() ); if( $( '#input_message' ).val() ) { // サーバーに、イベント名'new message' で入力テキストを送信 socket.emit( 'new message', $( '#input_message' ).val() ); $( '#input_message' ).val( '' ); // テキストボックスを空に。 } return false; // フォーム送信はしない } ); // サーバーからのメッセージ拡散に対する処理 // ・サーバー側のメッセージ拡散時の「io.emit( 'spread message', strMessage );」に対する処理 socket.on( 'spread message', //( strMessage ) => ( objMessage ) => { //console.log( 'spread message :', strMessage ); console.log( 'spread message :', objMessage ); // メッセージの整形 const strText = objMessage.strDate + ' - ' + objMessage.strMessage; // 拡散されたメッセージをメッセージリストに追加 //const li_element = $( '<li>' ).text( strMessage ); const li_element = $( '<li>' ).text( strText ); $( '#message_list' ).prepend( li_element ); // リストの一番上に追加 //$( '#message_list' ).append( li_element ); // リストの一番下に追加 } );

動作確認

サーバーを起動します。
「MyChat」フォルダで、下記コマンドを実行します。
node server.js

ブラウザから、「localhost:1337」にアクセスします。


例えば、「aiueo」と「あいうえお」というメッセージをフォームに入力し、「Send」ボタンを押します。

送信したメッセージが、リスト表示されます。

Chrome のデベロッパーツールの 「Console」に、
「connect」
に続いて、
「#input_message : aiueo」
「spread message : Object」
「#input_message : あいうえお」
「spread message : Object」
と表示されます。


サーバー側では、
「connection」
に続いて、
「new message aiueo」
「new message あいうえお」
と表示されます。

ブラウザを別に立ち上げ、「localhost:1337」にアクセスし、メッセージを送信すると、送信したメッセージが、両方のブラウザに、即座に、リスト表示されます。

起動したサーバーは、「Ctrl + C」で終了します。

ダウンロード

サンプルプログラム

関連ページ

前項目：04．サーバーからクライアントへメッセージの拡散の処理を作る

次項目：06．メッセージに、発信名を表示する