06．メッセージに、発信者名を表示する

メッセージに、発信者名を表示する処理を作成します。

解説

メッセージに、発信者名を表示することに関する処理は、以下です。

クライアント側で表示させるウェブページに、ニックネーム入力フォームを追加する。（ <form><input /><button>Join</button></form> )
クライアント側で動作するプログラムに、ニックネームを送信する処理を追加する。( socket.emit('join',・・・) )
サーバー側で動作するプログラムに、ニックネームを受信する処理を追加する。( socket.on('join',・・・) )

準備

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

ニックネーム入力フォーム

ウェブページを以下の画面構成で作成します。

「チャット画面」(chat-screen)と「入室画面」(join-screen)がある。
「チャット画面」は、非表示。(display:none)
「入室画面」は、ウィンドウの高さの残り全部を灰色で多い、灰色部分の中央に「ニックネーム入力フォーム」(display:flexを活用）

「public/index.html」全体としては、以下のようにします。
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>My Chat</title>  <style type="text/css"> html, body { height: 100%; margin: 0; } #wrapper { display: flex; flex-flow: column nowrap; /* The above is shorthand for: flex-direction: column, flex-wrap: nowrap */ height: 100%; } #lower-area { flex: 1 1 auto; /* The above is shorthand for: flex-grow: 1, flex-shrink: 1, flex-basis: auto */ position: relative; } #join-screen { width: 100%; height: 100%; display: flex; align-items: center; position: absolute; z-index: 10; background-color: #c0c0c0; } #join-form { text-align: center; width: 100%; } #chat-screen { display: none; } </style> </head> <body> <div id="wrapper"> <h1>My Chat</h1> <div id="lower-area"> <div id="join-screen"> <form id="join-form" action=""> ニックネーム : <input type="text" id="input_nickname" autocomplete="off" /><button type="submit">Join</button> </form> </div> <div id="chat-screen"> <form id="chat-form" action=""> ニックネーム : <span id="nickname"></span> <br /> メッセージ : <input type="text" id="input_message" autocomplete="off" /><button type="submit">Send</button> </form> <ul id="message_list"></ul> </div> </div> </div> <script src="/socket.io/socket.io.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="client.js"></script> </body> </html>

クライアント側の処理

「public/client.js」の「「Send」ボタンを押したときの処理」の上に、「Join」ボタンを押したときの処理を追加します。
// 「Join」ボタンを押したときの処理 $( '#join-form' ).submit( () => { console.log( '#input_nickname :', $( '#input_nickname' ).val() ); if( $( '#input_nickname' ).val() ) { // サーバーに、イベント名'join' で入力テキストを送信 socket.emit( 'join', $( '#input_nickname' ).val() ); $( '#nickname' ).html( $( '#input_nickname' ).val() ); $( '#join-screen' ).hide(); $( '#chat-screen' ).show(); } return false; // フォーム送信はしない } );

サーバーから送られてくるメッセージオブジェクトにニックネームが付加されるので、リスト表示するメッセージにニックネームを付加します。
「public/client.js」の「サーバーからのメッセージ拡散に対する処理」の、「メッセージの整形」処理に「ニックネーム」に関する処理を追加します。
// メッセージの整形 //const strText = objMessage.strDate + ' - ' + objMessage.strMessage; const strText = objMessage.strDate + ' - [' + objMessage.strNickname + '] ' + objMessage.strMessage;

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

サーバー側の処理

「server.js」の「接続時の処理」の上部に、「ニックネーム」変数を追加します。
let strNickname = ''; // コネクションごとで固有のニックネーム。イベントをまたいで使用される。

「server.js」の「新しいメッセージ受信時の処理」の上に、「入室時の処理」を追加します。
// 入室時の処理 // ・クライアント側のメッセージ送信時の「socket.emit( 'join', strNickname );」に対する処理【12】 socket.on( 'join', ( strNickname_ ) => { console.log( 'joined :', strNickname_ ); // コネクションごとで固有のニックネームに設定 strNickname = strNickname_; } );

「server.js」の「新しいメッセージ受信時の処理」の「メッセージオブジェクトの作成」に「ニックネームの設定」を追加します。
// メッセージオブジェクトの作成 const objMessage = { strNickname: strNickname, strMessage: strMessage, strDate: strNow }

「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' ); let strNickname = ''; // コネクションごとで固有のニックネーム。イベントをまたいで使用される。 // 切断時の処理 // ・クライアントが切断したら、サーバー側では'disconnect'イベントが発生する socket.on( 'disconnect', () => { console.log( 'disconnect' ); } ); // 入室時の処理 // ・クライアント側のメッセージ送信時の「socket.emit( 'join', strNickname );」に対する処理 socket.on( 'join', ( strNickname_ ) => { console.log( 'joined :', strNickname_ ); // コネクションごとで固有のニックネームに設定 strNickname = strNickname_; } ); // 新しいメッセージ受信時の処理 // ・クライアント側のメッセージ送信時の「socket.emit( 'new message', $( '#input_message' ).val() );」に対する処理 socket.on( 'new message', ( strMessage ) => { console.log( 'new message', strMessage ); // 現在時刻の文字列の作成 const strNow = makeTimeString( new Date() ); // メッセージオブジェクトの作成 const objMessage = { strNickname: strNickname, 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 ); } );

動作確認

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

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

「ニックネーム入力フォーム」が表示されます。

例えば、「ABCD」というニックネームをフォームに入力し、「Join」ボタンを押します。

入力した名前が、ニックネームとして表示されます。
メッセージ入力フォームが表示されます。

サーバー側では、
「connect」
に続いて、
「join : ABCD」
と表示されます。

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

サーバー側では、
「connect」
に続いて、
「#input_message : aiueo」
「spread message : Object」
「#input_message : あいうえお」
「spread message : Object」
と表示されます。

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

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

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

ダウンロード

サンプルプログラム