teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問javascriptでpusherへデータを送信したい(laravel)

編集履歴

質問編集履歴

6

追記

2020/10/03 11:43

投稿

akito_i
akito_i

スコア3

test CHANGED
File without changes
test CHANGED
@@ -22,9 +22,9 @@
22
22
 
23
23
  #行ったこと
24
24
 
25
- pusher.min.jsの記載が必要と思い追記したのですが
25
+ ①pusher.min.jsを追記
26
-
26
+
27
- 変わらず動作致しませんでした。
27
+ ②text-javascriptの記載
28
28
 
29
29
 
30
30
 

5

訂正

2020/10/03 11:43

投稿

akito_i
akito_i

スコア3

test CHANGED
@@ -1 +1 @@
1
- laravelでpusherへデータを送信できない
1
+ javascriptでpusherへデータを送信したい(laravel)
test CHANGED
@@ -10,31 +10,21 @@
10
10
 
11
11
  #課題
12
12
 
13
+ javascriptが動作しておらず送信ボタンを押しても、
14
+
13
- pusherのデバッグコンソールで確認すると、
15
+ イベントが発火せずメッセージを送ることができません。
16
+
14
-
17
+ （コンソールを確認しても何も表示されません）
18
+
15
- ページに遷移した時点でDisconnectionと表示されており、
19
+ （pusherの方もdisconnectionと表示されております。）
16
-
17
- 繋がっていないことが確認できます。
18
-
19
- (javascriptも動作していない？）
20
20
 
21
21
 
22
22
 
23
23
  #行ったこと
24
24
 
25
- ①.envファイルにkeyなど必要な情報の記載
26
-
27
- ②BROADCAST_DRIVER=pusher
28
-
29
- ③BroadcastServiceProviderのコメントを外す
30
-
31
- ④composer require pusher/pusher-php-server "~3.0"
32
-
33
- npm install --save laravel-echo pusher-js
34
-
35
- 上記コードの入力　bootstrap.jsのlaravel Echoに関する
25
+ pusher.min.jsの記載が必要と思い追記したのですが
36
-
26
+
37
- 記述のコメントを外す。
27
+ 変わらず動作致しませんでした。
38
28
 
39
29
 
40
30
 

4

追記

2020/10/03 11:41

投稿

akito_i
akito_i

スコア3

test CHANGED
File without changes
test CHANGED
@@ -16,6 +16,8 @@
16
16
 
17
17
  繋がっていないことが確認できます。
18
18
 
19
+ (javascriptも動作していない？）
20
+
19
21
 
20
22
 
21
23
  #行ったこと

3

訂正

2020/10/03 10:59

投稿

akito_i
akito_i

スコア3

test CHANGED
File without changes
test CHANGED
@@ -152,7 +152,105 @@
152
152
 
153
153
  //ログを有効にする
154
154
 
155
-
155
+ Pusher.logToConsole = true;
156
+
157
+
158
+
159
+ var pusher = new Pusher('[YOUR-APP-KEY]', {
160
+
161
+ cluster : '[YOUR-CLUSTER]',
162
+
163
+ encrypted: true
164
+
165
+ });
166
+
167
+
168
+
169
+ //購読するチャンネルを指定
170
+
171
+ var pusherChannel = pusher.subscribe('chat');
172
+
173
+
174
+
175
+ //イベントを受信したら、下記処理
176
+
177
+ pusherChannel.bind('chat_event', function(data) {
178
+
179
+
180
+
181
+ let appendText;
182
+
183
+ let login = $('input[name="login"]').val();
184
+
185
+
186
+
187
+ if(data.send === login){
188
+
189
+ appendText = '<div class="send" style="text-align:right"><p>' + data.message + '</p></div> ';
190
+
191
+ }else if(data.recieve === login){
192
+
193
+ appendText = '<div class="recieve" style="text-align:left"><p>' + data.message + '</p></div> ';
194
+
195
+ }else{
196
+
197
+ return false;
198
+
199
+ }
200
+
201
+
202
+
203
+ // メッセージを表示
204
+
205
+ $("#room").append(appendText);
206
+
207
+
208
+
209
+ if(data.recieve === login){
210
+
211
+ // ブラウザへプッシュ通知
212
+
213
+ Push.create("新着メッセージ",
214
+
215
+ {
216
+
217
+ body: data.message,
218
+
219
+ timeout: 8000,
220
+
221
+ onClick: function () {
222
+
223
+ window.focus();
224
+
225
+ this.close();
226
+
227
+ }
228
+
229
+ })
230
+
231
+
232
+
233
+ }
234
+
235
+
236
+
237
+
238
+
239
+ });
240
+
241
+
242
+
243
+
244
+
245
+ $.ajaxSetup({
246
+
247
+ headers : {
248
+
249
+ 'X-CSRF-TOKEN' : $('meta[name="csrf-token"]').attr('content'),
250
+
251
+ }});
252
+
253
+
156
254
 
157
255
 
158
256
 

2

追記

2020/10/03 10:34

投稿

akito_i
akito_i

スコア3

test CHANGED
File without changes
test CHANGED
@@ -48,6 +48,14 @@
48
48
 
49
49
 
50
50
 
51
+ #エラー（pusherのデバッグコンソール）
52
+
53
+
54
+
55
+ https://gyazo.com/aeffdc599594324df6d9161edc026460
56
+
57
+
58
+
51
59
  #コード
52
60
 
53
61
  chat.blade.php

1

訂正

2020/10/03 10:28

投稿

akito_i
akito_i

スコア3

test CHANGED
File without changes
test CHANGED
@@ -22,11 +22,7 @@
22
22
 
23
23
  ①.envファイルにkeyなど必要な情報の記載
24
24
 
25
- ②BROADCAST_DRIVER=pusherへ変```ここに言語を入力
25
+ ②BROADCAST_DRIVER=pusher
26
-
27
- コード
28
-
29
- ```更
30
26
 
31
27
  ③BroadcastServiceProviderのコメントを外す
32
28