【Nodejs】Nodejs+socket.io+express+https　その２ メッセージのやりとり

Linux
2020.08.24

htppsサーバーの起動ができたので、今度はサーバーとクライアント間でメッセージのやりとりをしてみました。

JavaScriptの勉強から

JavaScript初心者のため、サンプルを見ていて調べたことも記載します。

__dirname

__dirname には、現在実行中のソースコードが格納されているディレクトリパスが格納されています。

sendFile

指定されたパスでファイルを転送します。 ファイル名の拡張子に基づいて、Content-Type応答のHTTPヘッダーフィールドを設定します。

Express 4.x - API Reference
Access the API reference for Express.js 4.x, detailing all modules, methods, and properties for building web application...
expressjs.com

サーバー側プログラム(chat06.js)

var express  = require('express');
var app = express();
const https = require('https');
const fs = require('fs');
const crypto = require('crypto');

const ssl_server_key = '/etc/letsencrypt/live/www.faithit.jp/privkey.pem';
const ssl_server_crt = '/etc/letsencrypt/live/www.faithit.jp/cert.pem';
const options = {
	key: fs.readFileSync(ssl_server_key),
 	cert: fs.readFileSync(ssl_server_crt)
};
const port=8443;
const https_server = https.createServer( options,app );
https_server.listen(port);

app.get('/', function(req, res){
  res.sendFile(__dirname + '/index.html');
});

var io = require('socket.io')(https_server);
io.on('connection', function(socket){
  console.log('connected!!!');

  socket.on('chat message', function(msg){
    io.emit('chat message', msg);
  });
});

1行目から15行目までは前回と同じ。

17行目　　 クライアントからポートへのアクセスがあったとき、”index.html”ファイルをクライアントへ送ります。
21行目require()でNode.jsから扱えるようにする。起動したhttpsサーバーオブジェクトを関連付ける。
22行目o.on()メソッドを使ってクライアント側と接続されているかを確認します。
第1引数に”connection”を設定して、接続されているかどうかを確認し、接続されているときは、第2引数の関数を実行します。
サンプルでは接続されると、”connected”をコンソールに出力しています。
次にsocket.on()メソッドを使って、クライアント側から送られてくるメッセージ（今回は”chat message”)を受信すると、emit()メソッドで全ユーザーに受け取ったデータを配信します。
var io = require('socket.io')(サーバーオブジェクト);

クライアント側プログラム

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test Message</title>
<script src="https://code.jquery.com/jquery.min.js"></script>
</head>
<body>
<h1>メッセージ送受信　デモページ</h1>

<form action="">
<input id="sendmsg" autocomplete="off" /><button>Send</button>
</form>

<ul id="receive_mes"></ul>

<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io();
$('form').submit(function () {
	socket.emit('chat message', $('#sendmsg').val());
 	$('#sendmsg').val('');
  return false;
});

socket.on('chat message', function (msg) {
	$('#receive_mes').append($('<li style="margin-bottom: 5px;">').text(msg));
});
</script>
</body>
</html>
11行目 　 サーバー送信する文字列を入力するテキストボックスとボタンを定義しています。
15行目サーバー側から配信されるデータが表示されます。
17行目/socket.io/socket.io.jsは、ファイルとして生成するわけではなく、Node.jsサーバの実行結果として返ってくる。
20行目送信ボタンが押された時の処理で、サーバー側へテキストボックスの内容をメッセージ（今回は”chat message”)をつけて送信しています。
26行目サーバ側から配信されるメッセージ（今回は”chat message”)を受信すると、受信したメールを要素に追加しています。

コメント