常連

注目の的

社会貢献

質問力

回答者

拍手喝采

自己紹介

有名人

node.js socket.io redisでチャットの入室者一覧機能を作っていて分からないところがあります。
後から入室したユーザーは前に入ったユーザーの名前が表示されません。
redisでデータを格納し、その値をとりだして配信するという形で試行錯誤していますがうまくいきません。
あまり情報がないため、質問いたしました。

名前を入力させ、socket.emitでサーバー側に送り、サーバー側でsocket.onで受け取り、
client.setでredisのサーバーに格納しています。
成功するとログにsuccessと表示されるようにしており、ここまではうまくいきます。
その後、client.getでデータベースから値を取り出し、その値をio.sockets.emitで送信します。
そしてクライアント側でうけとた値を一覧に追加していっているのですが、
追加はできますが、やはり後から入室したユーザーは前に入ったユーザーの名前が表示されません。

node.js socket.io redisでチャットの入室者一覧機能の仕組みについて

###前提・実現したいこと
ここに質問したいことを詳細に書いてください
(例)PHP(CakePHP)で●●なシステムを作っています。
  ■■な機能を実装中に以下のエラーメッセージが発生しました。

###発生している問題・エラーメッセージ

```
エラーメッセージ
```

###該当のソースコード
```ここに言語を入力
ここにご自身が実行したソースコードを書いてください
```

###試したこと
課題に対してアプローチしたことを記載してください

###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報

Webアプリケーションとしてブラウザを活用したチャットシステムを構築する時に，WebSocketを使う長所・短所を説明せよ．特に，ポーリングやロングポーリング方式と比較する

###前提・実現したいこと
Window10, VisualStudioCode（以下、VSCode）上にMEANスタックの開発環境を構築しようとしております。
ジェネレータは、Yeomanのangular-fullstackを利用しています。
[https://github.com/angular-fullstack/generator-angular-fullstack](https://github.com/angular-fullstack/generator-angular-fullstack)


###発生している問題・エラーメッセージ
サーバ／クライアント両方のデバッグをVSCodeのデバッグ機能で実現できないか検討しております。
こちらで情報を漁ったところ、クライアントはChrome Debuggerで、サーバはnode inspectorを利用するという情報は得ております。個人的には、両方ともVSCode上でブレイクポイントを張ってデバッグを行うという流れを汲みたいのですが、それは不可能なのでしょうか？また、上記についての直接の回答とは別に、現時点でのデバッグのベストソリューションを教えて頂けると大変助かります。
VSCodeのlaunch.jsonの記述なども参考になるものがございましたら提供いただきたいです。

以上、宜しくお願い致します。

MEANスタックの開発環境構築 デバッグ方法について

趣味でプログラミングしています。

オブジェクト指向設計をより理解しようと UML なるものに挑戦しようとしています。

構造化 ( C言語 etc. ) の場合は フローチャート, 疑似言語 でいいと思いますが、
オブジェクト指向を取り入れた場合、複雑になるために (フローチャートは)使えないようです。
( 使えるが 一部のみ... )

なので継承関係等を表すために UMLなるものを使おうかと思っています。

クラス図の [ +, #, - (アンダーバー)... ] という具合に 一つのクラスで収まるものは理解できます。

ですが 複数のクラス(同士)が関係しあうのを表すのが...

記号そのものは覚えればいいかもしれませんが、
その用語の意味が...


[UML入門 - IT専科](http://www.itsenka.com/contents/development/uml/)


を読むと「関連」と「集約」,「コンポジション」,「依存」の違いがわからない...

集約 の方は
『集約は関連の一種でオブジェクトが複数集まって全体を構成する関係』(上記サイト)
とあります。これは オブジェクト配列とか リスト系 ( vector, list, ArrayList etc. ) とかとして保持する...
とも取れますが、"集約" の例として単体のメンバオブジェクト ( フィールド ) を提示している等でブレブレ...

「汎化」( Generalization ) は
『Javaなどの継承、つまり「is a」の関係を表現します。』(上記サイト)
とあるために、
「Javaでいう abstract や通常のクラスを継承する場合」
なんだろうな。とわかります。

「実現」( Realization ) は
『Javaでいうinterfaceと同等の意味で、相手を具象化する関係のとき用いる表現です』(上記サイト)
とあるために
「Javaでいう interfaceを継承 ( 厳密には実装か。 ) する場合」
なんだろうな。とわかります。


もうちょっと調べてみると

[C++言語 to UML](http://d.hatena.ne.jp/t-koyama03/20100422/1271958636)
       ＆
[Javaプログラマーに贈るUML入門" "オージス総研" ](https://www.ogis-ri.co.jp/otc/hiroba/technical/JavaWorld_UMLIntroduction/)

がヒットしました。

"C++言語 to UML" の方を見ると

関連 はメンバオブジェクト ( フィールド ) として保持しています。
ですが、デザインパターンでいうコンポジションとはどう違うのかが...

もう一方の「Javaプログラマーに贈るUML入門」の方には

『コンポジションは集約の条件に加 え、
2つのオブジェクトのライフサイクル（生存期間）も同じ場合に使用し、
強い集約関係を表します』

とあることから、なんとなく C++で言えば
コンストラクタで生成 -> メンバオブジェクトとして保持 -> デストラクタで破棄
みたいな状態のやつかなと。

ですが、関連, 集約...がわかりません。

「こんなことも わからんのか」とおっしゃる方もいらっしゃいますが、
私は趣味で独学でやっています。
なので教えてくれる人もいないし、Googleで調べてもわかりづらいとか...
学校で習ったとかならともかく、独学では難しいです。

意味そのものはわかっても、他のものとの区別がつかない...
Javaやっていれば 汎化と実現はごっちゃにはならないだろうけど、
関連と集約の差は????
とか。
UMLを読んでソースコードを記述するときでも大変 (理解しづらい) のに、
ソースコードからUML ...
どれを使うべきかわからないっていう問題。
趣味でやっているので感覚で独自に、自分がわかればいいのかもしれませんが、
他の 例えば デザインパターンを説明しているサイトの多くでは
このUMLを使って定義していますよね。
なのでちゃんと理解したいのですが...


どなたかご存じの方宜しくお願い致します。

[情報]
言語: C/C++ or Java ( C++の方が楽ですが。 )

宜しくお願い致します。

UMLの用語定義 違い

AWS
rootユーザのパスワードを作成した後、SFTP接続を試してみました。
「SFTP プロトコルを初期化できません。SFTP サーバが起動していますか？」

というメッセージが表示され、接続に失敗しました。
FTPクライアントはWinSCPです。
ただ、同じAWSに対しec-2userだとSFTP接続は可能です。

rootでのSFTPを行うためにはどうしたらよいでしょうか？

EC2 SFTP接続

現在、websocketサーバーにnginxを導入してSSL化したいと考えています。
プロキシサーバーとしてSSL化のみをおこなう予定です。
初心者で、初めてnginxに触れるのですが、下記の環境で設定をしてみました。

SSL無しの場合は動作していることは確認しています。クライアントでは(ws://websocketサーバーIPadress:9090)で接続
(SSL時にはws→wssに変更)
●websocketサーバー構成
CentOS7
websocket：voryx/Thruway
nginx:1.12.0
同一サーバー内に全てインストールしています。


vi /etc/nginx/nginx.conf
```ここに言語を入力
stream {
    upstream backend {
        server 127.0.0.1:9090;
    }

    server {
        listen 443 ssl;
        ssl_certificate      /root/SSL/server.crt;
        ssl_certificate_key  /root/SSL/XXXX.com.2017.key;
        proxy_connect_timeout 10s;
        proxy_timeout 10s;
        proxy_pass backend;
    }
}
```
多少は予想していましたが、やはり動かず、基本的なところがわかっていないのですが、
どのようにすれば良いのか教えて頂きたくよろしくお願いします。
(追記)

編集後、設定は下記の通りとなっています。
```ここに言語を入力
user  nginx;
worker_processes  1;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    #gzip  on;

    include /etc/nginx/conf.d/*.conf;


    stream {
        upstream backend {
            server 127.0.0.1:9090;
        }

        server {
            listen 443 ssl;
            ssl_certificate      /root/SSL/server.crt;
            ssl_certificate_key  /root/SSL/XXXXX.com.2017.key;
            proxy_connect_timeout 10s;
            proxy_timeout 10s;
        
    
            location / {
                proxy_pass backend;
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection "upgrade";
            }
        }
    }

}

```

更に修正版
```ここに言語を入力

user  nginx;
worker_processes  1;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    #gzip  on;

    include /etc/nginx/conf.d/*.conf;




}

stream {
    upstream backend {
        server 127.0.0.1:9090;
    }

    server {
        listen 443 ssl;
        ssl_certificate      /root/SSL/server.crt;
        ssl_certificate_key  /root/SSL/XXXX.com.2017.key;
        proxy_connect_timeout 10s;
        proxy_timeout 10s;
        proxy_pass backend;
    }

}
```

nginx-websocketサーバーのSSL設定

Larvalの仕組みであるファサード（オブジェクト注入、サービスコンテナ、サービスプロバイダー）について

まずはこちらをご覧いただきたい。

[依存性の注入とは](https://laravel10.wordpress.com/2015/03/29/%E4%BE%9D%E5%AD%98%E6%80%A7%E3%81%AE%E6%B3%A8%E5%85%A5%E3%81%A8%E3%81%AF/#more-946)

Messengerクラスのreturnで使っているsendメソッドは、

SenderInterfaceインターフェイスを継承しているMailSenderクラスとBikeSenderクラスのsendメソッドだと思いますが、
MailSenderクラスとBikeSenderクラスのsendメソッドをmailtransmissionというメソッドに修正した場合、
Messengerクラスのreturnで使っている箇所も、
return $this->sender->mailtransmission($message);に修正しないといけませんよね。

まず、依存性注入やDIコンテナを導入する観点として保守性や柔軟性の向上という点が思想とされていますが、参照URL先の依存性の注入を使っていないケースと依存性の注入を使っているケースの話では柔軟性についてはとてもわかります。

そもそも依存性の注入を使っていないケースで
BikeSenderクラスはデッドロジックになってますよね。。。
あえて、わかりやすくするためにそうしてるのかもですが。

そこは置いといて話は戻り、依存性注入の話とはズレますが
MailSenderクラスとBikeSenderクラスのメソッド名を修正したら
Messengerクラスで、MailSenderクラスとBikeSenderクラスの使用するメソッド名も修正しないといけない点は、柔軟性とはいえないと思います。

そもそも、参照URL先の内容に対する私の観点が違うのでしょうか？
一応、参照URL先の内容はファサードまで読みました。
最終的にファサードを使うと何が嬉しいのかというところで、柔軟性が上がった結果、メモリー効率やパフォーマンス効率がよくなるという理解はあるのですが、もう一度、依存性の注入から見返していくと、そもそもMessengerクラスが、MailSenderクラスに依存しているから柔軟性がないっていうけど、依存性の注入を使ったケースでもメソッド名修正したらその箇所修正しなきゃいけないから、その点柔軟ではないよね。って思ってるのですが、結局、依存性の注入という概念でも最小限の修正は必要なのでしょうか？

何が知りたいとかではなく、ただ思ったことを質問してみました。

Larvalの仕組みであるファサード（オブジェクト注入、サービスコンテナ、サービスプロバイダー）について

###前提・実現したいこと

React(Reduxなし)でアプリケーションを作っています。
Reactの子コンポーネントが持つ関数を、親コンポーネントのイベントを契機として呼び出したいです。

###発生している問題・エラーメッセージ
実現方法がわかりません。どのようにすれば良いのか教えてください。

###該当のソースコード
イメージとしては、下記のChildコンポーネント内の関数`ineternal`をParentコンポーネントのイベントを契機として呼び出したいです。
`internal`は親から渡された関数を呼び出し、stateを更新します。`internal`はstateを更新するため、Childコンポーネントのrenderから呼んではいけないとの認識です。
```
class Parent extends React.components {
  update (e) => { this.setState({s: e}); } 
  render () => <div><Child handler={(e) => this.update(e);}
                     param={this.state.s} /></div>;
}

class Child extends React.components {
   private _a = new extLibrary();
   internal () => {
      /* do something */
      this.props.handler(_a);
   }
   render () => <div />
}
```

###試したこと
子コンポーネントにref属性(ref="child"など)をもたせて,`this.refs.child.internal()`と試しました。`this.refs.child`のオブジェクトは取得できましたが、internalプロパティがありませんでした。また、refの利用はあまり推奨されていない？ようなので、別の方法があればそちらを採用したいです。

###補足情報(言語/FW/ツール等のバージョンなど)
Reactのバージョンは15.5.4です。

[React] 親コンポーネントのイベントを契機とした子コンポーネントの関数の呼び出しかた

マテリアルデザインを使ったホームページを制作したいのですが、フレームワークを使ったことがないのでどれが良いのか分かりません、
初心者に向いているフレームワークはどれが良いでしょうか。

マテリアルデザインのフレームワークはどれがよいですか

###前提・実現したいこと
現在React+Redux+material-uiでシステム開発を行っています。

###発生している問題・エラーメッセージ

material-uiのTextFieldを使用した入力欄で入力の1文字目が確定されてしまうという現象が発生しています。
例）入力したい文字   ⇒「開発」
実際に入力される文字⇒「ｋあいはつ」

現状の作りとしては、1文字入力するごとにTextFieldのonChangeイベントが発火して、storeのデータを更新するような作りになっています。
※redux-saga等のmiddlewareは使用していません。


###該当のソースコード
かなり莫大なソースになってしまうので省略させていただきます。
ファイル構成等は、ごく一般的なReact+Reduxの構成になってい（ると思われ）ます。


###試したこと
・TextFieldのrenderを別ファイルに切り出す
・valueを使わず、defaultValueを使用する

###補足情報(言語/FW/ツール等のバージョンなど)
react v15.4.2
redux v5.0.4
material-ui v0.17.1

以上です。
拙い文章で申し訳ありませんが、よろしくお願いします。

React+Redux+material-uiで文字入力の1文字目が確定されてしまう件の対処法

```Javascript
module.exports.getHoge = (userId, date) => new Promise((resolve, reject) => {
  let hoges = [];

  Promise.all([getHogeIncluded(userId, date), getHogeExcluded(userId, date)])
    .then((arrHoge) => {
      if (arrHoge[0][0]) {

        =============> console.log('1');

        const foreachfunction = new Promise((resolve, reject) => {
          _.forEach(arrHoge[0], (val, key) => {

            =============> console.log('2');

            knex
              .select('hoge_name')
              .from('Hoge_hoge')
              .where('hoge_id', val.hoge_id)
              .then((hogeNames) => {

                =============> console.log('3');

                _.forEach(hogeNames, (v, k) => {
                  hoges.push(`${URL}/${hogeId}/${val.hoge_id}/${hogeNames[k].hoge_name}`);
                });

                =============> console.log('4');

                arrHoge[0][key].hoge = hoges; // eslint-disable-line no-param-reassign
                hoges = [];
              });
          });
          resolve(arrHoge);
        });

        foreachfunction
          .then(() => {

            =============> console.log('5');

          })

      }
    })
});
```

このような関数を実行すると
```
1
2
2
2
2
5
3
4
3
4
3
4
3
4
```
となります。

全ての`forEach`の処理後の結果が欲しいのですが途中で`5`が呼ばれしまっている状況にあります。
初心者ながら`Promise`を使っているのですが私が実現したいことはどのように書き換えれば可能なのでしょうか...。
ご教授していただけると幸いです。

Node.js lodashのforEachが全て終わった後に処理をしたい

携帯アプリを作っていまして、セキュリティとしてセッションIDを追加したいと思っています。

実装としては

  
 
ログイン成功時（セッションIDを作成）
↓
データベース等との操作時はセッションIDを毎回確認


とゆう感じです。

質問はスクリプトの書き方です

```ここに言語を入力

function Login(){
//もしログインに成功したら
if(...){ session_start();}
}

function scan(){
//セッションIDを使ってユーザー確認
};


scan();//scanは毎回呼ばれる。

function()...

function()...

//以降、DB関連の関数はscan後に実行


```


やりたいことはこんな感じでして、ログイン認証はセッションとは別にデータベースで照合します。
  
 
 質問
scan()内にどのような実装をすればいいのか解りません

セッションIDによるセキュリティ

Springフレームワークについて勉強しています。

DI(依存性注入）にはコンストラクタインジェクションとセッターインジェクションがありますが、使い分けの基準などがありましたら教えて下さい。
宜しくお願いします。

コンストラクタインジェクションとセッターインジェクションの使い分け

python（3.6.1）で下記のサイトから各事業のスクレイピングを
しようとしているのですが、取得対象のページが
通常のサイトのようにurlでの指定ができないためどのようにすれば良いか
教えてください。

他のサイトはPyQueryを使ってやっているのですが
勝手が違うので、取っ掛かりすらもわからないです。

http://www.jinzai-sougou.go.jp/srv110.aspx
http://www.jinzai-sougou.go.jp/srv120.aspx

aps（javascript）サイトのスクレイピングについて

サーバーでNode.js クライアントはJavaScripでチャットを作ろうと思っています。

この際XSS対策等、セキュリティ関連のエスケープ処理ではどういった実装をすればいいのでしょうか？

単純に、危険そうな文字列をサーバーでエスケープするのもありですが、サーバー側で文字を可変されエスケープ処理を廃棄されても意味が有りません

Node.jsにはHelmetとゆうモジュールもあるようですが、クライアントのJavaScript実行環境はMonacaとゆう携帯アプリでしてドメイン等はなく、SocketIoは
```ここに言語を入力
https://cdn.socket.io/socket.io
```
で取得します。


アドバイスいただけたらと思います。

Node.jsでSocketioを使う際のセキュリティについて

初歩的な事ですが、そもそもセッションIDってどうやって識別しているのでしょうか？

クライアントからphpにアクセスして session_start()したとします。
この時に生成されるsession_id ですが、もう一度同じ端末からphpにアクセスすれば同じidを取得できます。
```ここに言語を入力
<?php
 session_start();
 echo session_id();
```

これって、どうしてですか？
端末情報をkeyにしたArrayのような解釈でいいのでしょうか？

セッションIDについて

```Javascript
module.exports.getHoge = (userId, date) => new Promise((resolve, reject) => {
  ...省略
  
  Promise.all([hoge1(userId, date), hoge2(userId, date)])
    ... 省略

    .then(() => {
      console.log('3 then');

      connection.connect();
      connection.query(`SELECT * FROM hoge_photos WHERE app_id = ${appId};`, (err, rows, fields) => {
        if(err){
          console.log('mysql2 err');
          console.log(err);
          throw err;
        } else {
          console.log('ここが期待通りじゃない');
          console.log(rows);
          _.forEach(rows, (v, k) => {
            arrPhoto.push(`${s3BucketURL}/${userId}/${v.app_id}/${rows[k].photo_hoge}`);
            isPhotoData[arrKey]['photo'] = arrPhoto;
          });
        }
      });

    })
    .then(() => {
      console.log('4 then');
      resolve(_.union(isPhotoData, isNoPhotoData));
    });
});
```
上記のようなコードがあるのですが
これを実行すると
```
1 then
2 then
3 then
4 then
ここが期待通りじゃない
[ TextRow {
    hoge: hoge } ]
```
と`3 then`の後に`ここが期待通りじゃない`処理が来てほしいのですが
`connection.query`の部分が非同期処理のために`4 then`の後に結果がきているのが原因だと思っています。

このような場合、私が期待している`3 then`の後に
`connection.query`の結果がくるにはどうしたら良いのでしょうか？

Promiseが期待通りの動作をしない

rubyでクローラーを作成するため、VPSの契約をしようとしています。

最低でも100サイト✕1000ページくらいを巡回する感じにしようとしてるのですが、VPSのスペックはどのようなものを選べば良いものでしょうか？

クローラーの場合、メモリ、CPU、SSD（HDD）、何を優先して選べば良いのでしょうか？


通常どの部分がボトルネックになるのか等、まったく分かっておらず、四苦八苦しています。

どの部分を優先して選ぶべきかアドバイスをいただければ幸いです。
よろしくお願いいたしますm(_ _)m

VPSの選び方を教えてください

npmからgithubのリポジトリをとる方法が分かりません。

package.jsonの書き方お願いします！

npmからgithubのリポジトリをとってくる

自分はweb業界にてフロントエンジニアをしているものです。
出身学科は情報系ではなく理学系でプログラミング（情報系）についての知識・勉強は入社してから始めました。（厳密にはインターンやアルバイトなどで経験していたのですがそれはさておいて）
環境構築について未だに難しい、という印象を持っています。
そこでどのような知識を持っていれば得意とは言わないまでも、難なく構築できるようになるのか、そのための知識とは何なのか、について最近考えています。
それについてご意見をいただければと思います。

回答例：
Linuxの知識、ネットワークの知識、サーバの知識が必要。
特にポートやプロセスについての理解が必要、など。
（参考書籍などあると嬉しいです）

例えばPHP環境をwindowsで一番簡単に環境構築しようとしたらXAMMPだと思います。
これを用いればPHPはもちろんApacheやMySQLも容易に立ち上げることができます。
ただ実際の企業の現場ではXAMMPを使ってローカル環境構築、というのは無いように思います。Vagrantを使い構成管理ツール（Chef、Ansible、etc...）を使ってプロビジョニングして―というのが一般的かと思います。

また既存のサービスの増強をしようとしようとした場合、新サーバにソフトウェアを入れてネットワーク設定をしてということも間々あると思います。
例えばDBのクラスタリング設定（設計）とか、ですね。

こういったことをこなせるようになるためにはどのような知識が必要なのでしょうか？
もちろん例えばDBであればそのDBごとの知識は必要になるとは思いますが、それ以前の話を聞かせていただきたいです。

何分抽象的な質問で恐縮ではございますが、皆さんのご意見をいただければと思います。
よろしくお願い致します。

また、環境構築の難しさ、というのは一体どこにあるのか、ということもお考えをお聞かせくださいませ。