03．クライアントからサーバーへのメッセージの送信の処理を作る

クライアントからサーバーへのメッセージの送信の処理を作成します。

解説

クライアントからサーバーへのメッセージの送信に関する処理は、以下です。

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

準備

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

メッセージ入力フォーム

「public/index.html」の、「body」部の<h1>My Chat</h>の下に、以下のメッセージ入力フォームを追加します。
<form action=""> <input type="text" id="input_message" autocomplete="off" /><button type="submit">Send</button> </form>

「public/index.html」全体としては、以下のようにします。
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>My Chat</title> </head> <body> <h1>My Chat</h1> <form action=""> <input type="text" id="input_message" autocomplete="off" /><button type="submit">Send</button> </form> <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」ボタンを押したときの処理を追加します。
// 「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; // フォーム送信はしない } );

「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; // フォーム送信はしない } );

サーバー側の処理

「server.js」の「接続時の処理」の中に、「新しいメッセージ受信時の処理」を追加します。
// 新しいメッセージ受信時の処理 // ・クライアント側のメッセージ送信時の「socket.emit( 'new message', $( '#input_message' ).val() );」に対する処理 socket.on( 'new message', ( strMessage ) => { console.log( 'new message', strMessage ); } );

「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; // 接続時の処理 // ・サーバーとクライアントの接続が確立すると、 // 　サーバー側で、'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 ); } ); } ); // 公開フォルダの指定 app.use( express.static( __dirname + '/public' ) ); // サーバーの起動 server.listen( PORT, () => { console.log( 'Server on port %d', PORT ); } );

動作確認

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

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

例えば、「aiueo」と「あいうえお」というメッセージをフォームに入力し、「Send」ボタンを押します。
Chrome のデベロッパーツールの「Console」に、
「connect」
に続いて、
「#input_message : aiueo」
「#input_message : あいうえお」
と表示されます。

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

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

ダウンロード

サンプルプログラム