WebSocket 允許雙向通信：服務(wù)器可以向?yàn)g覽器發(fā)送消息，而瀏覽器（客戶端）可以通過相同的連接進(jìn)行響應(yīng)。我正在使用以下方法在 Laravel 6 中實(shí)現(xiàn)聊天應(yīng)用程序：Laravel Echo JavaScript 包（不是 laravel-echo-server），Laravel 網(wǎng)絡(luò)套接字推送器-js。我已經(jīng)得到它的工作，服務(wù)器觸發(fā)事件和客戶端監(jiān)聽這些事件如下。安裝 Laravel WebSockets 包。composer require beyondcode/laravel-websockets配置config/broadcasting.php. 'pusher' => [ 'driver' => 'pusher', 'key' => xxx, 'secret' => xxx, 'app_id' => xxx, 'options' => [ 'cluster' => xxx, 'encrypted' => true, 'useTLS' => true, 'host' => '127.0.0.1', 'port' => 6001, 'scheme' => 'https', ], ], ]配置config/websockets.php'apps' => [ [ 'id' => xxx, 'name' => xxx, 'key' => xxx, 'secret' => xxx, 'enable_client_messages' => true, 'enable_statistics' => true, ], ],安裝Pusher服務(wù)器。composer require pusher/pusher-php-server "~3.0"設(shè)置廣播驅(qū)動(dòng)程序以pusher在.env文件中使用。BROADCAST_DRIVER=pusher在我的客戶端使用laravel-echo和。pusher-jsimport Echo from "laravel-echo"window.Pusher = require('pusher-js');window.Echo = new Echo({ broadcaster: 'pusher', key: 'your-pusher-key', wsHost: window.location.hostname, wsPort: 6001, disableStats: true,});啟動(dòng) WebSockets 服務(wù)器。php artisan websockets:serve在服務(wù)器端，使用實(shí)現(xiàn)類的事件類觸發(fā)事件ShouldBroadcastNow。event(new MyEventClass((object)$message));一切正常。在第 8 步中，我從服務(wù)器端觸發(fā)事件。請注意，我沒有使用官方的 Pusher 服務(wù)器，我只是使用 Pusher API 實(shí)現(xiàn)，pusher-js但指向Laravel Echo JavaScript package本地Laravel WebSockets server，在步驟 6 中配置。請不要Laravel Echo JavaScript package與laravel-echo-serverof混淆Socket.IO Server。我沒有使用Socket.IO Server.現(xiàn)在，我不想像第 8 步那樣在服務(wù)器端觸發(fā)事件，而是想從客戶端觸發(fā)事件，因?yàn)?WebSocket 允許雙向通信。我怎么能用 , 做到Laravel這Laravel Echo JavaScript Package一點(diǎn)Laravel WebSockets PHP package？
4 回答
一只萌萌小番薯
TA貢獻(xiàn)1795條經(jīng)驗(yàn) 獲得超7個(gè)贊
請參閱此文檔：https ://pusher.com/docs/channels/using_channels/events#triggering-client-events
根據(jù) pusher 文檔，使用這個(gè)初始化你的前端
this.echo = new Pusher('mykey', {
wsHost: 'localhost',
wsPort: 6001,
forceTLS: false,
disableStats: true,
enabledTransports: ['ws', 'wss']
});
用它來觸發(fā)你的事件
var channel = this.echo.subscribe("private-channel");
channel.bind("pusher:subscription_succeeded", () => {
var triggered = channel.trigger("client-someEventName", {
your: "data",
});
});
肥皂起泡泡
TA貢獻(xiàn)1829條經(jīng)驗(yàn) 獲得超6個(gè)贊
我可能不正確，但我不相信你可以用他們的pusher-js包裹推送給 Pusher。這就是pusher-php-server作曲家包的用途。
可能有一個(gè)節(jié)點(diǎn)包，但你為什么要重新發(fā)明輪子？只需使用 axios 或 Vuex 操作發(fā)布到您的一條路線以觸發(fā)您的事件，然后讓 Echo 獲取響應(yīng)。
您甚至不需要?jiǎng)?chuàng)建控制器，只需使用路由關(guān)閉并觸發(fā)您的事件。Axios 或 Vuex 都將返回一個(gè) Promise，因此您可以在組件或 Vuex 操作中管理等待響應(yīng)。
我可以理解您是否嘗試使用 RabbitMQ 或 Rachet 等實(shí)現(xiàn)不同類型的廣播驅(qū)動(dòng)程序，但它被設(shè)計(jì)為某種循環(huán)循環(huán)，從 js 命中您的端點(diǎn)，從 PHP 觸發(fā)事件，讓 Pusher/或者 websockets 做這件事，用 js 接收你的廣播。
萬千封印
TA貢獻(xiàn)1891條經(jīng)驗(yàn) 獲得超3個(gè)贊
初始化 Echo 后，您需要在前端的某個(gè)頻道上收聽。我將展示一些 Vue 代碼，但要進(jìn)行相應(yīng)的修改：
Vue文件
export default {
methods: {
sendCommand(command) {
axios.post('/api/command', { 'command': command })
.then((res) => {
//
})
}
},
mounted() {
Echo.channel('xxx')
.listen('.weight-change', (e) => {
this.weight = e.weight
})
}
}
在這里，您可以看到所有傳入的消息都在代碼的偵聽部分捕獲，并且發(fā)送新消息是通過后端的 api 路由完成的，該路由將它們發(fā)送到 Echo 通道。
如果您需要任何澄清，請告訴我。
波斯汪
TA貢獻(xiàn)1811條經(jīng)驗(yàn) 獲得超4個(gè)贊
對于每個(gè)可能面臨這個(gè)問題的人。
您不需要回顯，應(yīng)該直接從 Pusher 實(shí)例化
const my_pusher = new Pusher("APP_KEY", {
cluster: 'mt1',
wsHost: window.location.hostname,
wsPort: 6001,
forceTLS: false,
disableStats: true,
});
并將消息發(fā)送到服務(wù)器：
my_pusher.send_event('EVENT_NAME',{'ANYTHING':'YOU_WANT'})
- 4 回答
- 0 關(guān)注
- 351 瀏覽
添加回答
舉報(bào)
0/150
提交
取消