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

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

新規登録して質問してみよう
ただいま回答率
85.50%
ニフティクラウドmobile backend

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

JavaScript

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

HTML

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

Monaca

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

Q&A

0回答

1739閲覧

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

barrett

総合スコア11

ニフティクラウドmobile backend

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

JavaScript

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

HTML

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

Monaca

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

0グッド

0クリップ

投稿2018/11/26 13:17

編集2022/01/12 10:55

前提・実現したいこと

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

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

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

該当のソースコード

index.html

html

1<!DOCTYPE HTML> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 6 <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'"> 7 <script src="components/loader.js"></script> 8 <script src="lib/onsenui/js/onsenui.min.js"></script> 9 10 <link rel="stylesheet" href="components/loader.css"> 11 <link rel="stylesheet" href="lib/onsenui/css/onsenui.css"> 12 <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css"> 13 <link rel="stylesheet" href="css/style.css"> 14 <script src="https://js.pusher.com/4.3/pusher.min.js"></script>//最新のものに変更 15 <script src="js/app.js"></script> 16</head> 17<body> 18 <ons-navigator swipeable id="nav" page="login.html"></ons-navigator> 19 <template id="login.html"> 20 <ons-page id="login"> 21 <div class="join-area" style="text-align: center; margin-top: 30px;"> 22 <h4>チャットルームにログインしてください</h4> 23 <p> 24 <ons-input id="userName" modifier="underbar" placeholder="ユーザ名" float></ons-input><br><br> 25 <ons-input id="chatId" modifier="underbar" placeholder="chatId" float></ons-input> 26 </p> 27 <p style="margin-top: 30px;"> 28 <ons-button onclick="join()">Join</ons-button> 29 </p> 30 </div> 31 </ons-page> 32 </template> 33</body> 34</html>

chat.html

html

1<ons-page id="chat"> 2 <ons-toolbar> 3 <div class="left"><ons-back-button>Back</ons-back-button></div> 4 <div class="center"></div> 5 </ons-toolbar> 6 <input type="hidden" id="channelId" /> 7 <div class="chat-area"> 8 <ons-list id="chats"></ons-list> 9 </div> 10 <div class="send-area"> 11 <ons-input id="message" placeholder="メッセージ"></ons-input> 12 <ons-button onclick="send()" modifier="quiet">送信</ons-button> 13 </div> 14</ons-page>

app.js

javascript

1// This is a JavaScript file 2let pusher; 3let ncmb; 4const pusherId = 'MY_PUSHER_ID'; 5const applicationKey = 'MY_APPLICATION_KEY'; 6const clientKey = 'YOUR_CLIENT_KEY'; 7 8// グローバル変数の処理 9ons.ready(function() { 10/////////////////////////////////////////////////////////////////////////////////////////////////// 11//サンプルコードから変更 12 pusher = new Pusher(pusherId, { 13 cluster: 'ap1', 14 forceTLS: true 15 }); 16////////////////////////////////////////////////////////////////////////////////////////////////// 17 ncmb = new NCMB(applicationKey, clientKey); 18}); 19 20// 初期表示処理 21$(document).on('init', (event) => { 22 if (event.target.id === 'login') { 23 $('#chatId').val('channel'); 24 const userName = localStorage.getItem('userName'); 25 if (userName) 26 $('#userName').val(userName); 27 } 28}); 29 30// チャット画面を表示したときの処理 31$(document).on('show', (event) => { 32 if (event.target.id === 'chat') { 33 const data = event.target.data; 34 $('#channelId').val(data.chatId); 35 connectPusher(data.userName, data.chatId); 36 loadChat(data.userName, data.chatId); 37 } 38}); 39 40// チャット画面から戻った時の処理 41$(document).on('hide', (event) => { 42 if (event.target.id === 'chat') { 43 pusher.unsubscribe($('#channelId').val()); 44 } 45}); 46 47// チャットルームにログインする処理 48const join = () => { 49 const userName = $('#userName').val(); 50 if (userName === '') { 51 ons.notification 52 .alert('ユーザ名を決めてください'); 53 return; 54 } 55 localStorage.setItem('userName', userName); 56 const chatId = $('#chatId').val(); 57 $('#nav')[0].pushPage('chat.html', { 58 data: { userName, chatId } 59 }) 60} 61// Pusherに接続する処理 62const connectPusher = (userName, chatId) => { 63 const channel = pusher.subscribe(chatId); 64 channel.bind('message', function(data) { 65 showChat(userName, data); 66 }); 67}; 68 69// 既存のチャットメッセージを読み込む処理 70const loadChat = (userName, channel) => { 71 const Chat = ncmb.DataStore('Chat'); 72 Chat 73 .equalTo('channel', channel) 74 .fetchAll() 75 .then(chats => { 76 for (let chat of chats) { 77 showChat(userName, chat); 78 } 79 }); 80} 81 82// メッセージを一つ表示する処理 83const showChat = (userName, data) => { 84 if (data.userName == userName) { 85 $('#chats').append(` 86 <ons-list-item modifier="nodivider"> 87 <div class="right"> 88 <ons-button style="background-color: green">${data.message}</ons-button> 89 </div> 90 </ons-list-item>`); 91 }else{ 92 $('#chats').append(` 93 <ons-list-item modifier="nodivider"> 94 <ons-button>${data.message}</ons-button> 95 <span class="list-item__subtitle">${data.userName}</span> 96 </ons-list-item>`); 97 } 98} 99 100// メッセージ送信処理 101const send = () => { 102 const message = $('#message').val(); 103 const userName = localStorage.getItem('userName'); 104 const channel = $('#channelId').val(); 105 106 ncmb.Script 107 .data({ 108 userName, 109 message, 110 channel 111 }) 112 .exec("POST", "push.js") 113 .then(function(res){ 114 $('#message').val(''); 115 }) 116 .catch(function(err){ 117 }); 118};

push.js

javascript

1const crypto = require("crypto"); 2const request = require('superagent'); 3const NCMB = require('ncmb'); 4 5module.exports = (req, res) => { 6 const applicationKey = 'MY_APPLICATION_KEY'; 7 const clientKey = 'MY_CLIENT_KEY'; 8 saveDataStore( 9 applicationKey, 10 clientKey, 11 req.body 12 ).then(() => { 13 return sendPusher( 14////////////////////////////////////////////////////////////////////////////////// 15//サンプルコードから変更 16 'MY_PUSHER_KEY', 17 'MY_PUSHER_SECRET', 18 'MY_PUSHER_APP_ID', 19////////////////////////////////////////////////////////////////////////////////// 20 req.body 21 ) 22 }) 23 .then((response) => { 24 res.json({}); 25 }) 26 .catch((err) => res.status(401).json(err)); 27}; 28 29const saveDataStore = (applicationKey, clientKey, body) => { 30 const ncmb = new NCMB(applicationKey, clientKey); 31 const Chat = ncmb.DataStore('Chat'); 32 const chat = new Chat; 33 return chat 34 .set('channel', body.channel) 35 .set('userName', body.userName) 36 .set('message', body.message) 37 .save() 38} 39 40const sendPusher = (authKey, secretKey, appId, body) => { 41 const authTimestamp = Date.now() / 1000; 42 const authVersion = '1.0'; 43 const medhod = 'POST'; 44 const path = `/apps/${appId}/events`; 45 const message = { 46 data: JSON.stringify({ 47 userName: body.userName, 48 message: body.message 49 }), 50 name: "message", 51 channel: body.channel 52 }; 53 const bodyMd5 = crypto 54 .createHash('md5') 55 .update(JSON.stringify(message)) 56 .digest('hex'); 57 const queryString = `auth_key=${authKey}&auth_timestamp=${authTimestamp}&auth_version=${authVersion}&body_md5=${bodyMd5}`; 58 const authSigning = [ 59 medhod, 60 path, 61 queryString 62 ].join("\n"); 63 const signature = crypto 64 .createHmac("SHA256", secretKey) 65 .update(authSigning) 66 .digest("hex"); 67 return request 68 .post(`https://api.pusherapp.com${path}?${queryString}&auth_signature=${signature}`) 69 .set('Content-Type', 'application/json') 70 .send(JSON.stringify(message)) 71}

試したこと

  • new Pusherのところを変えた

最初、そもそもpusherのインスタンスを作れてないエラーが出てpusherのページのチュートリアルではnew Pusherの所がサンプルコードと違ったのでそれに合わせて変更した。

  • アプリ側からデータストアへ書き込みした

最初にサンプル通りやった時はncmbのスクリプト側からデータストアへ書き込みだけはできた(後述)のでncmb側の不具合でスクリプトが上手く動いてないのかと思いアプリ側からデータストアへ書き込みをした結果、アプリ側からは書き込みはできた。

  • push.jsのpusherへの接続関連をコメントアウトした

とりあえずデータストアへ書き込みだけでもできるようしたくて、push.jsのpusherへの接続関連でエラーを起こしているのではないかと思った。なので、そこだけコメントアウトして動かしてみた結果、データストアへ書き込めなかった。

補足情報

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

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問