質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.34%

  • JavaScript

    17608questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    9626questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • Monaca

    1013questions

    「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

  • ニフティクラウドmobile backend

    21questions

    ニフティクラウドmobile backend (mBaaS)はニフティが提供するBaasサービスです。プッシュ通知、データストア、ファイルストア、会員管理・認証機能などのバックエンド機能をクラウドから提供しています。 Andoird/iOS/JavaScript/Unityと各種SDKに対応しています。

NCMBのデータストアに書き込めず、Pusher APIからレスポンスがない

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 56

barrett

score 2

 前提・実現したいこと

Monaca,ncmb,pusherを用いてmBaaSとPusherを使ってチャットアプリを作るを読み進めながらチャットアプリを作っています。
サンプルコード通りにやってもMonacaのアプリからncmbのスクリプトを通じてデータストアへ書き込みができない上に、pusherから戻ってきません。

 発生している問題・エラーメッセージ

  • ncmbのデータベースへncmbのスクリプトを用いて保存ができない
  • pusherからのレスポンスがなく、入力した文字が表示されない

 該当のソースコード

index.html

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
  <script src="components/loader.js"></script>
  <script src="lib/onsenui/js/onsenui.min.js"></script>

  <link rel="stylesheet" href="components/loader.css">
  <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
  <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
  <link rel="stylesheet" href="css/style.css">
  <script src="https://js.pusher.com/4.3/pusher.min.js"></script>//最新のものに変更
  <script src="js/app.js"></script>
</head>
<body>
  <ons-navigator swipeable id="nav" page="login.html"></ons-navigator>
  <template id="login.html">
    <ons-page id="login">
      <div class="join-area" style="text-align: center; margin-top: 30px;">
        <h4>チャットルームにログインしてください</h4>
        <p>
          <ons-input id="userName" modifier="underbar" placeholder="ユーザ名" float></ons-input><br><br>
          <ons-input id="chatId" modifier="underbar" placeholder="chatId" float></ons-input>
        </p>
        <p style="margin-top: 30px;">
          <ons-button onclick="join()">Join</ons-button>
        </p>
      </div>
    </ons-page>
  </template>
</body>
</html>


chat.html

<ons-page id="chat">
  <ons-toolbar>
    <div class="left"><ons-back-button>Back</ons-back-button></div>
    <div class="center"></div>
  </ons-toolbar>
  <input type="hidden" id="channelId" />
  <div class="chat-area">
    <ons-list id="chats"></ons-list>
  </div>
  <div class="send-area">
    <ons-input id="message" placeholder="メッセージ"></ons-input>
    <ons-button onclick="send()" modifier="quiet">送信</ons-button>
  </div>
</ons-page>


app.js

// This is a JavaScript file
let pusher;
let ncmb;
const pusherId = 'MY_PUSHER_ID';
const applicationKey = 'MY_APPLICATION_KEY';
const clientKey = 'YOUR_CLIENT_KEY';

// グローバル変数の処理
ons.ready(function() {
///////////////////////////////////////////////////////////////////////////////////////////////////
//サンプルコードから変更
  pusher = new Pusher(pusherId, {
    cluster: 'ap1',
    forceTLS: true
  });
//////////////////////////////////////////////////////////////////////////////////////////////////
  ncmb = new NCMB(applicationKey, clientKey);
});

// 初期表示処理
$(document).on('init', (event) => {
  if (event.target.id === 'login') {
    $('#chatId').val('channel');
    const userName = localStorage.getItem('userName');
    if (userName)
      $('#userName').val(userName);
  }
});

// チャット画面を表示したときの処理
$(document).on('show', (event) => {
  if (event.target.id === 'chat') {
    const data = event.target.data;
    $('#channelId').val(data.chatId);
    connectPusher(data.userName, data.chatId);
    loadChat(data.userName, data.chatId);
  }
});

// チャット画面から戻った時の処理
$(document).on('hide', (event) => {
  if (event.target.id === 'chat') {
    pusher.unsubscribe($('#channelId').val());
  }
});

// チャットルームにログインする処理
const join = () => {
  const userName = $('#userName').val();
  if (userName === '') {
    ons.notification
      .alert('ユーザ名を決めてください');
    return;
  }
  localStorage.setItem('userName', userName);
  const chatId = $('#chatId').val();
  $('#nav')[0].pushPage('chat.html', {
    data: { userName, chatId }
  })
}
// Pusherに接続する処理
const connectPusher = (userName, chatId) => {
  const channel = pusher.subscribe(chatId);
  channel.bind('message', function(data) {
    showChat(userName, data);
  });
};

// 既存のチャットメッセージを読み込む処理
const loadChat = (userName, channel) => {
  const Chat = ncmb.DataStore('Chat');
  Chat
    .equalTo('channel', channel)
    .fetchAll()
    .then(chats => {
      for (let chat of chats) {
        showChat(userName, chat);
      }
    });
}

// メッセージを一つ表示する処理
const showChat = (userName, data) => {
  if (data.userName == userName) {
    $('#chats').append(`
      <ons-list-item modifier="nodivider">
        <div class="right">
          <ons-button style="background-color: green">${data.message}</ons-button>
        </div>
      </ons-list-item>`);
  }else{
    $('#chats').append(`
      <ons-list-item modifier="nodivider">
        <ons-button>${data.message}</ons-button>
        <span class="list-item__subtitle">${data.userName}</span>
      </ons-list-item>`);
  }
}

// メッセージ送信処理
const send = () => {
  const message = $('#message').val();
  const userName = localStorage.getItem('userName');
  const channel  = $('#channelId').val();

  ncmb.Script
      .data({
        userName,
        message,
        channel
      })
      .exec("POST", "push.js")
      .then(function(res){
        $('#message').val('');
      })
      .catch(function(err){
      });
};


push.js

const crypto  = require("crypto");
const request = require('superagent');
const NCMB    = require('ncmb');

module.exports = (req, res) => {  
    const applicationKey = 'MY_APPLICATION_KEY';
    const clientKey = 'MY_CLIENT_KEY';
    saveDataStore(
        applicationKey,
        clientKey,
        req.body
    ).then(() => {
        return sendPusher(
//////////////////////////////////////////////////////////////////////////////////
//サンプルコードから変更
            'MY_PUSHER_KEY',
            'MY_PUSHER_SECRET',
            'MY_PUSHER_APP_ID',
//////////////////////////////////////////////////////////////////////////////////
            req.body
        )
    })
    .then((response) => {
        res.json({});
    })
    .catch((err) => res.status(401).json(err));
};

const saveDataStore = (applicationKey, clientKey, body) => {
    const ncmb = new NCMB(applicationKey, clientKey);
    const Chat = ncmb.DataStore('Chat');
    const chat = new Chat;
    return chat
        .set('channel', body.channel)
        .set('userName', body.userName)
        .set('message', body.message)
        .save()
}

const sendPusher = (authKey, secretKey, appId, body) => {
    const authTimestamp = Date.now() / 1000;
    const authVersion = '1.0';
    const medhod = 'POST';
    const path = `/apps/${appId}/events`;
    const message = {
        data: JSON.stringify({
            userName: body.userName,
            message: body.message
        }),
        name: "message",
        channel: body.channel
    };
    const bodyMd5 = crypto
        .createHash('md5')
        .update(JSON.stringify(message))
        .digest('hex');
    const queryString = `auth_key=${authKey}&auth_timestamp=${authTimestamp}&auth_version=${authVersion}&body_md5=${bodyMd5}`;
    const authSigning = [
        medhod,
        path,
        queryString
    ].join("\n");
    const signature = crypto
        .createHmac("SHA256", secretKey)
        .update(authSigning)
        .digest("hex");
    return request
        .post(`https://api.pusherapp.com${path}?${queryString}&auth_signature=${signature}`)
        .set('Content-Type', 'application/json')
        .send(JSON.stringify(message))
}

 試したこと

  • new Pusherのところを変えた
    最初、そもそもpusherのインスタンスを作れてないエラーが出てpusherのページのチュートリアルではnew Pusherの所がサンプルコードと違ったのでそれに合わせて変更した。
  • アプリ側からデータストアへ書き込みした
    最初にサンプル通りやった時はncmbのスクリプト側からデータストアへ書き込みだけはできた(後述)のでncmb側の不具合でスクリプトが上手く動いてないのかと思いアプリ側からデータストアへ書き込みをした結果、アプリ側からは書き込みはできた。
  • push.jsのpusherへの接続関連をコメントアウトした
    とりあえずデータストアへ書き込みだけでもできるようしたくて、push.jsのpusherへの接続関連でエラーを起こしているのではないかと思った。なので、そこだけコメントアウトして動かしてみた結果、データストアへ書き込めなかった。

 補足情報

最初にサンプル通りにやった時はデータストアへの書き込みが出来ました。どこかをいじってるタイミングでデータストアへ書き込めなくなる。再現しようとアプリやncmb、pusherのプロジェクトを変えてサンプルコードをコピペし直しても再現不可能でした。

返答よろしくお願いします

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.34%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • JavaScript

    17608questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    9626questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • Monaca

    1013questions

    「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

  • ニフティクラウドmobile backend

    21questions

    ニフティクラウドmobile backend (mBaaS)はニフティが提供するBaasサービスです。プッシュ通知、データストア、ファイルストア、会員管理・認証機能などのバックエンド機能をクラウドから提供しています。 Andoird/iOS/JavaScript/Unityと各種SDKに対応しています。