FC2ブログ

スマフォのアプリを作りたい(11):React Nativeでチャットアプリ味見④

   プログラミング [2020/02/04]
ちょっと、もうタイトル長過ぎ。
なので、「④」で済ませちゃってますが、つまり、こういうことです。
Start
 →スマフォのアプリを作りたい
  →スマフォ側の環境はReact Nativeを使用します
   →試しにチャットアプリでReact Nativeコードを味見して見ます
    →スマフォ側のUIをサンプル・コードで動かしてみました
     (react-native-gifted-chatを使ったサンプル)
    →サーバ側を準備したいと思ってます
←今回はココ


◆チャットサーバを準備するには
どんな環境があるのか?

-チャット的な動きをさせるための通信プロトコル?規格?-
XMLHttpRequest:JavaScriptなどのウェブブラウザ搭載のスクリプト言語でサーバとのHTTP通信を行うための、組み込みオブジェクト(API)である。 すでに読み込んだページからさらにHTTPリクエストを発することができ、ページ遷移することなしにデータを送受信できるAjaxの基幹技術である。
→レスポンス性能的にちょっと難があるそうな。

WebSocket:ウェブアプリケーションにおいて、双方向通信を実現するための技術規格である。XMLHttpRequestの欠点を解決する技術。
→上記の「難」を解決するんだって。

-チャット等を実現するためのフレームワーク?サービス?-
Rails:Ruby on Railsのこと。Rubyでできたフレームワーク(ライブラリ群?)
→Rubyで作る気はない。

Pusher:websocketを提供するAPIで、アカウント登録することで無料である程度使える。
→「ある程度無料で」とあるので、どっからか有料になっちゃうのかな。

Firebase:Googleが提供している、すばやく高品質のモバイルアプリやWebアプリケーションを開発することができるプラットフォーム(クラウドサービス)です。Firebaseを使うことで、開発者はアプリケーションの開発に専念でき、バックエンドで動くサービスを作成する必要も管理する必要もありません。
→検索するとこれを使ったという事例が多かった気がする。環境全てが楽に手に入りそう。無料プランでもかなり使えそう。

RatChet:WebSocketを介してクライアントとサーバー間でリアルタイムの双方向アプリケーションを作成するツールを開発者に提供する疎結合PHPライブラリ。MITライセンス。
→きっと、Firebaseに比べたら難儀しそうだけど。全体把握(保守性)&ランニングコストのことを考えた場合、これでいっかなぁ。

まだまだ、色々とあるみたいでしたが、PHPでただっぽいRatChetを使ってみることにします。

◆Eclipse環境を復活させる
以前使ってたサーバ・スクリプト開発環境のEclipseを復活することにしました。
(スマフォ・アプリ環境をタブレットにインストールしようとして迷走していた時、タブレットのディスク容量不足のために一旦アンインストールしてしまってました。今度は1TBの増設SSDを接続してあるし、余裕で入るでしょう。)

参考:https://mergedoc.osdn.jp/
さるの場合、上記のサイトから、「Eclipse 4.7 Oxygen」を選択し、次の画面の(Download)ボタンが沢山並んでいるところの「Windows 64bit-full edition」行の「Ultimate」列の[Download]ボタンを選んで、ダウンロードを実施しました。以前と同じVersionを選択したのは、やはり少し慣れがあるからです。

インストールは、ダウンロードしたpleiades-ultimate-win-64bit_jre.zipを解凍するだけです。
ただし、あんまりパスが深いところになると、実行時に問題があるという話が以前はありました。
.zipをダブルクリックすると、解凍先を指定するダイアログが出ます。
指定したパスの下に「pleiades」という名前のフォルダが作成されて、その下に展開されます。

以下2つのショートカットをディスクトップとかに作っておくと便利です。
(インストール先フォルダ)\pleiades\eclipse\eclipse.exe
(インストール先フォルダ)\pleiades\xampp\xampp-control.exe

次は、・・・



◆Compserのインストール
RatChetでチャットサーバーを仕立てるサンプル等説明が以下のサイトに載ってます。
参考★1:https://www.mediaplex.co.jp/blogs/creative/retchet-websocket/
で、読んでいくと
Compserというものを使ってRatChetをインストールするようにと書かれています。

またまた、知らない単語が出てきました。

「Composerとは」でぐぐった結果以下のサイトに当たりました。
参考:https://qiita.com/atwata/items/d6f1cf95ce96ebe58010
参考:https://qiita.com/zenno04/items/9d8411b823e12d8fc88f
早い話が、PHP環境に必要パッケージをインストールする際に、関連するパッケージも含めてインストールしてくれるものらしい。
なので、追加のPHPライブラリをインストールする際には、まずはこのComposerをインストールしておくと便利ということだそうだ。

参考:https://getcomposer.org/download/
上記サイトからComposer-Setup.exeをダウンロードし、起動します。
-「全ユーザかこのユーザだけ使用するか」は全ユーザにしました。
-「developer mode」のチェックは触りませんでした。(アンインストールできなくなる?)
-「Choose the command-line PHP ・・・」でPleiades\xammp\php\php.exeを指定します。
※上記で[Next]するとエラーが出て次に行かない現象が発生しました。
 エラーは、「php_bz.dll」等が無いとの内容で、たくさん出てます。
 →Pleiades\xammp\php\php.iniをエディタで開いてみると
  Pleiadesのパスを含んだ指定にドライブ名が含まれていないことが原因でした。
  ex)\AppMake\Pleiades\xampp・・・
    →D:\AppMake\Pleiades\xampp・・・に全て変更

-プロキシの指定とかいくつか警告メッセージが出ますが、よく読んで対応してください。

少なくとも以下の2か所にフォルダが作成されます。(インストール先は選べないということ。)
・C:\ProgramData\ComposerSetup
・C:\Users\(ユーザID)\AppData\Roaming\Composer

上記※のphp.iniの不具合?に絡んでちょっと迷走した内容を以下に書きます。
「xampp環境だとComposer-Setup.exeが使えない?」と思ってしまったのです。
そこで、参考にしたサイトの説明を丸のみさるまねしてかなり無駄なことをしてしまいました。




●Composer-Setup.exeを使わないインストール?
以下のサイトを参考に実施してみました。
参考:https://qiita.com/deigo/items/f285b025e7db204e2222
どうも、環境変数設定をComposer-Setup.exeが勝手に弄るのが気に入らない?

1)まずは、composer.pharなるものをダウンロードする必要があります。
前と同じ以下のサイトから入手可能です。
参考:https://getcomposer.org/download/
下にちょっとスクロールすると「Manual Download」と書かれた下に各バージョンのリンクがあります。
1.9.2」をクリックしてダウンロードしました。

2)ダウンロードした「composer.phar」は、「(Eclipseインストール先)\xampp\php」下に移動します。

3)以下3つのbatファイルを作成するんだそうです。
Eclipse(Pleiades)をインストールした各フォルダに3つのバッチファイルを作成します。
↓「composer xxxxxx」と打ったときに「php カレント\composer.phar xxxxxx」に置き換えてます。
----xampp\php\composer.bat-------------------------
@ECHO OFF
php "%~dp0composer.phar" %*
---------------------------------------------------
※「%~dp0」は、その.batが居るディレクトリの意味です。
↓「composer xxxxxx」→「php カレント\composer.phar xxxxxx」への置き換えです。
----xampp\htdocs\composer.bat------------------------
@echo off
SET PHP_HOME=D:\AppMake\Pleiades\xampp\php\
SET PATH=PHP_HOME
SET CURRENT_DIR=%~dp0
PATH=%PHP_HOME%
php "%PHP_HOME%composer.phar" %*
---------------------------------------------------

↓「php xxxxxx」→「PHPインストール先\php xxxxxx」への置き換えです。
----xampp\htdocs\pnp.bat----------------------------
@echo off
SET PHP_HOME=D:\AppMake\Pleiades\xampp\php\
SET CURRENT_DIR=%~dp0
SET PATH=%PHP_HOME%

%PHP_HOME%php %*
---------------------------------------------------

※赤字のところは、xamppフォルダのある場所に変更してください。

4)コマンドプロンプトを管理者権限で起動します。
カレントディレクトリを「xampp/php」にします。
以下のコマンドを実行します。

<注意>
以下は、slim/slim-skeltonというフレームワークをslim_sanにインストールするという意味です。Composerをインストールしているわけではありません。つまり、Composerのインストールという意味では、2)で終わってます。

----コマンドプロンプト-----------------------------
composer create-project slim/slim-skeleton slim_san
---------------------------------------------------

実行すると、xampp\phpの下にslim_sanというフォルダが作成されてslim/slim-skeletonフレームワークの環境が作成されているみたいです。

これをやっちゃうと、追加したフレームワークを完全に無かったことにするのは結構厄介なんだそうです。
なので、composer.pharと各batはリネームして、slim_sanフォルダは放置しちゃってます。







◆RatChetのインストール
★1(https://www.mediaplex.co.jp/blogs/creative/retchet-websocket/)に戻ります。
でもって、Composerってやつはどうやって使うもの?
「・・・1ステップでインストール」とタイトルされているけど・・・。
composer.jsonの中身が書いてはあるのですが、何をどうするのかさるには見当つきません。

調べた感じでは、
-「プロジェクト」のルートディレクトリにcomposer.jsonを作成し、インストールしたいパッケージ情報を書き込む。
-コマンドプロンプトでそのルートディレクトリをカレントにして「composer install」と打つ。
んだそうです。

まだ、プロジェクト自体を作成していませんが、Eclipseのワークスペースはデフォルトで、xampp\htdocsのはずなので、そこをカレントにしてみます。
composer.jsonの中身は、★1を参考に以下のようにしてみました。
----xampp\htdocs\composer.json----------------------
{
"autoload": {
"psr-0": {
"VTChatSrvp": "src"
}
},
"require": {
"cboden/ratchet": "*"
}
}
---------------------------------------------------

※上の「"autoload": {・・・},」はこの時点では不要かもしれません。
意味的には、「src」というフォルダ配下にある.phpで定義されているnamespace等を「VTChatSrv」から始まるnamespace(名前空間)として使用できるようにオートローダーに認識させる という意味だそうです。オートローダー? psr-0は「ルール」を示すんだそうですが、よくわかりません。Composerを使いこなすためには、まじめに勉強しないと無理ですね。

composer install」を実行すると結構な量のメッセージが出ました。
----コマンドプロンプト-----------------------------
D:\AppMake\Pleiades\xampp\htdocs>composer install
Loading composer repositories with package information
Updating dependencies (including require-dev)
Package operations: 18 installs, 0 updates, 0 removals
- Installing symfony/routing (v3.4.37): Downloading (100%)


react/event-loop suggests installing ext-event (~1.0 for ExtEventLoop)
react/event-loop suggests installing ext-pcntl (For signal handling support when using the StreamSelectLoop)
react/event-loop suggests installing ext-uv (* for ExtUvLoop)
Writing lock file
Generating autoload files
---------------------------------------------------

たぶん、成功したんだと思います。
今度は、xampp\htdocs\vendorの下に色々入りました。


◆チャットサーバ・サンプルの実行
★1サイトのサンプルコードをまずはまるっと真似しました。

1)サーバタスク・スクリプト
xampp\htdocsにサーバスクリプトを作成します。
----xampp\htdocs\chat-server.php------------------
<?php
use Ratchet\Server\IoServer;
use Ratchet\Http\HttpServer;
use Ratchet\WebSocket\WsServer;
use ChatSrv\Chat;

require_once '.\vendor\autoload.php';
require_once '.\vtchatsrv\vtchatsrv.php';

$server = IoServer::factory(
new HttpServer(
new WsServer(
new Chat()
)
),
8080
);

$server->run();
---------------------------------------------------

参考サイト★1では、「&amp;amp;lt;」とかの記述が入っていて、一瞬戸惑った。
上記は「<」に置換、「-&amp;amp;gt;」は「->」に置換してます。
赤字は、それ以外の変更箇所です。

7行目:RatChetのコンポーネントを参照する(namespaceを有効にする)ためのrequire_onceは前節でRatChetをインストールした先を指定します。
8行目:次に作成するChatクラスを定義しているスクリプトを指定しました。
4行目:8行目のrequire_onceで指定したスクリプトで指定しているnamespace\classです。


2)Chatクラス・スクリプト
タスク・スクリプトが使用するRatChetのイベント処理クラスです。
あえて、サブフォルダを作成して、その下にファイルを作成しました。
※サブフォルダを「src」にしなかったのは、さるがComposerを未だ理解できていないせいです。
----xampp\htdocs\VTChatSrv\vtchatsrv.php----------
<?php
namespace ChatSrv;
use Ratchet\MessageComponentInterface;
use Ratchet\ConnectionInterface;

class Chat implements MessageComponentInterface {
protected $clients;

public function __construct() {
$this->clients = new \SplObjectStorage;
}

public function onOpen(ConnectionInterface $conn) {
// Store the new connection to send messages to later
$this->clients->attach($conn);

echo "New connection! ({$conn->resourceId})\n";
}

public function onMessage(ConnectionInterface $from, $msg) {
$numRecv = count($this->clients) - 1;
echo sprintf('Connection %d sending message "%s" to %d other connection%s' . "\n"
, $from->resourceId, $msg, $numRecv, $numRecv == 1 ? '' : 's');

foreach ($this->clients as $client) {
if ($from !== $client) {
// The sender is not the receiver, send to each client connected
$client->send($msg);
}
//受信動作を簡単に確認するための暫定処理
else {
$client->send("<<your message>>" . $msg);
}

}
}

public function onClose(ConnectionInterface $conn) {
// The connection is closed, remove it, as we can no longer send it messages
$this->clients->detach($conn);

echo "Connection {$conn->resourceId} has disconnected\n";
}

public function onError(ConnectionInterface $conn, \Exception $e) {
echo "An error has occurred: {$e->getMessage()}\n";

$conn->close();
}
}
---------------------------------------------------

「&amp;amp;lt;」→「<」、「-&amp;amp;gt;」→「->」以外の修正は赤字箇所のみです。
「//受信動作を・・・・」以下は、このあと説明する動作確認環境で、クライアント側の受信動作を確認するために追加しました。


3)Chatサーバスクリプトの起動
作ったスクリプトを起動してみます。
-コマンドプロンプトを起動します。
-カレントディレクトリをxampp\htdocsにします。
-php chat-server.phpと打ちます。

スクリプトに問題がなければ、メッセージは何も出ずにそのまま待機した状態になります。
バグがある場合には、
----コマンドプロンプト-----------------------------
D:\AppMake\Pleiades\xampp\htdocs>php chat-server.php
PHP Fatal error: Class 'Chat' not found in D:\AppMake\Pleiades\xampp\htdocs\chat-server.php on line 14
PHP Stack trace:
PHP 1. {main}() D:\AppMake\Pleiades\xampp\htdocs\chat-server.php:0

---------------------------------------------------

とか出ます。
その場合は、バグを修正してリトライしてください。

待機状態になったら、次の手順です。


4)クライアント用サーバ呼出しHTML
サーバにアクセスするためのHTMLを作成します。
----xampp\htdocs\testchat.html---------------------
<html>
<script>
var conn = new WebSocket('ws://localhost:8080');
conn.onopen = function(e) {
console.log("Connection established!");
};

conn.onmessage = function(e) {
console.log(e.data);
};
</script>
<body>
</body>
</html>
---------------------------------------------------



5)チャット送信テスト
以下の手順で、動作が確認できます。
以下説明は、Eclipse環境/Chromeがインストール済みであることが前提です。

-コマンドプロンプト(管理者権限)のカレントディレクトリをxampp\htdocsにして
 サーバスクリプトを起動します。「php chat-server.php」
----コマンドプロンプト-----------------------------
C:\WINDOWS\system32>cd /d D:\appmake\pleiades\xampp\htdocs

D:\AppMake\Pleiades\xampp\htdocs>php chat-server.php

---------------------------------------------------


-xampp-contorol.exeを起動20200204_1.jpgし、Apacheを開始します。
20200204_2.jpg

-Chromeを起動して、http://localhost/testchat.htmlをブラウズします。
 画面には何も出ないので、[Ctrl]+[Shift]+[J]を押してデベロッパーツールを開きます。
 Consoleタブ上に「connection established!」と出ているはずです。

-Consoleタブ上で「conn.send('Hello!');」とか打ってみます。
 「undefined」と返ってくるのは、正常です。たぶん。
 その下に「<<your message>>Hello!」と出ればOKです。
20200204_3.jpg

-サーバ・スクリプトを動作させているコマンドプロンプトを参照します。
 送ったメッセージが表示されていれば、OKです。
----コマンドプロンプト-----------------------------
D:\AppMake\Pleiades\xampp\htdocs>php chat-server.php
New connection! (54)
Connection 54 sending message "縺薙s縺ォ縺。縺ッ縲・ to 0 other connections
Connection 54 sending message "縺雁・豌励〒縺励◆縺具シ・ to 0 other connections
Connection 54 sending message "Hello!" to 0 other connections
Connection 54 sending message "How are you?" to 0 other connections
---------------------------------------------------

※日本語のメッセージは化けちゃってましたね。

サーバ側のざーっくりした環境ができました。


ここで、一旦切ります。

この後は、前に「マフォのアプリを作りたい(9)・・・」で動作を確認していたスマフォ側アプリとの接続を試してみます。

では、またそのうち。
(m__)m





スポンサーサイト





コメントの投稿

非公開コメント

カレンダー
01 | 2024/02 | 03
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 - -
プロフィール

さるもすなる

Author:さるもすなる
さるです。別HPサイト「さるもすなる」から侵食してきました。 山菜/きのこ、それとタイトルにしたPPバンド籠のことをメインに徒然に・・・・暇を持て余したさるの手仕事:男手芸のブログってことで。

最新記事
最新コメント
月別アーカイブ
カテゴリ
天気予報

-天気予報コム- -FC2-
本家のHPのトップ
山菜や茸の話です
PPバンドの籠作品と作り方です
投稿をお待ちしております



PVアクセスランキング にほんブログ村 にほんブログ村 ハンドメイドブログへ



マニュアルのお申し込み



検索フォーム
リンク
RSSリンクの表示
ブロとも申請フォーム

この人とブロともになる

QRコード
QR