來源：YouTube | 00:23:12 | 2026-08-13
Laravel 生態系提供從輪詢、佇列事件到即時 WebSocket 的漸進式工具，開發者應依需求選擇最適當的即時機制，並在架構上謹慎設計頻道與事件流向，以避免 fan-out 風暴，同時透過互動式體驗找回網路上的共在感。
- 現場互動暖場：觀眾掃描 QR code 參與迷你遊戲，親身體驗即時協作應用的運作。
- 核心技術堆疊：介紹 Laravel Cloud、Reverb（WebSocket 伺服器）、Echo（客戶端）與 Octane（記憶體常駐）各自角色。
- Broadcasting 基礎：
php artisan install:broacasting設定channels.php、授權邏輯，以及 presence 與 private channel 的使用方式。 - 繞過應用伺服器：Echo whisper 實現 client-to-client 事件，並強調 fan-out 概念的架構警覺。
- 三種即時策略（上）：輪詢（Inertia
usePoll）與佇列事件（ShouldBroadcast）的現場遊戲演示。 - 三種即時策略（下）：即時事件（
ShouldBroadcastNow）與 client events，以及遊戲在真實負載下的混亂表現。 - 總結與理念：即時協作不只是技術挑戰，更在於創造連結、對抗遠端工作的孤獨感。
- QA：Joe 分享準備歷程，揭露互動遊戲本身就是完整 Web 應用，並由手機遠端控制。
-
「漸進式即時」是務實的架構哲學，而非技術妥協：Joe 將輪詢包裝為「完全正當」的策略，顛覆了許多人對即時應用必須 WebSocket 的迷思。從歷史看，從早期的 Comet、長輪詢到 WebSocket 興起，社群常陷入「WebSocket 至上」的謬誤。然而輪詢在低頻率、低延遲容忍場景中具有簡單、可預測、易於除錯的優勢。Laravel 的
usePoll甚至提供 cancel/overlap/rest 模式，顯示框架團隊認真看待輪詢作為一等公民。這種漸進路徑讓開發者能先以最低複雜度驗證產品假設，再逐步升級，符合軟體工程的演化式設計。 -
Fan-out 風暴：即時架構中最被低估的挑戰：Joe 指出「你必須高度警覺誰在監聽、誰在廣播」，並以現場觀眾為例：若每個人都連上同一頻道，事件傳遞會變成 O(n^2) 的指數級爆炸。這是一個反直覺的陷阱：開發者往往只考慮「我能發送事件」，卻忽略「誰會收到事件」。Reverb 的 fan-out 設計雖強大，但若不規劃頻道拓撲，很容易造成客戶端處理負擔與頻寬浪費。Joe 的策略——讓觀眾透過 HTTP 發送、僅講者監聽——示範了「廣播點」與「監聽點」分離的關鍵模式。這也引申出：在設計 REST API 時，人們習慣 request/response，而 WebSocket 的 publish/subscribe 需要不同的心智模型。
-
Presence Channel 是身分感知即時應用的核心，但常被簡化：Laravel 的 presence channel 回呼設計讓授權與使用者資料回傳合而為一，減少了開發者自行管理線上名單的負擔。Joe 展示的
here、joining、leaving回呼，底層依賴 Reverb 的 presence 協議。然而，這種設計也隱含單一全域狀態的假設：在水平擴展下，WebSocket 連接分散於多個 Reverb 節點時，presence 資訊需跨節點同步（通常透過 Redis 等中介）。Laravel 框架抽象了這部分，但開發者仍應理解其分散式限制。批判性觀察：presence channel 的授權回呼僅在連線建立時觸發，若使用者權限在連線期間發生變化（如被踢出），需要額外機制處理，這是常見的盲點。 -
佇列事件與即時事件的取捨：sync queue 的甜蜜與危險：演講中利用 managed queues 展示佇列事件，並以
ShouldBroadcastNow示範即時事件。ShouldBroadcastNow內部使用 sync queue，意味著廣播在 HTTP 請求處理流程中同步執行。這能保證最低延遲，但在高並發下可能阻塞 worker，導致吞吐量下降。Laravel 的 managed queues 昨日才推出，顯示框架正試圖簡化佇列基礎設施，但開發者仍需理解：選擇即時廣播與否，本質上是延遲與吞吐量的對抗。現場遊戲的混亂（進度條無法判定獲勝）可能與瀏覽器處理大量同步事件有關，也突顯了前後端協同優化的重要性。 -
互動式演講作為產品原型：技術演示的更高境界：Joe 的演講本身就是一個完整即時協作應用，從 QR 碼掃描、手機控制簡報、團隊競賽到地理圍欄驗證，所有環節都透過 WebSocket 串接。這超越了傳統「程式碼片段示範」，而是展現了「體驗即證明」的演講形式。他提到自己作為遠端工作者感到孤獨，而即時協作應用能創造「不是完全孤獨」的感受，這將技術選擇提升到情感層面。批判性思考：這種高度依賴現場網路、觀眾配合、設備性能的演示，也暴露了即時應用在非理想環境下的脆弱性——例如遊戲失敗可能源於瀏覽器負載或網路延遲，而非邏輯錯誤。但正是這種「真實世界的混亂」讓演講更具說服力，因為它誠實呈現了即時系統的複雜性。
| 概念 | 說明 |
|---|---|
| Reverb | Laravel 第一方 WebSocket 伺服器，處理即時連線與事件廣播。 |
| Echo | Reverb 的客戶端 JavaScript 函式庫，用於訂閱頻道、收發事件。 |
| Octane | 開機常駐應用程式於記憶體，大幅提升 HTTP 吞吐量。 |
| Presence Channel | 可感知成員的頻道，連線時需授權並回傳使用者資訊，提供 here/joining/leaving 回呼。 |
| Private Channel | 需授權的私有頻道，回呼回傳 boolean 決定是否允許連線。 |
| Client Events | 透過 Echo whisper 直接繞過應用伺服器，在 WebSocket 層進行 client-to-client 通訊。 |
| Fan-out | 事件由伺服器廣播給所有訂閱者的機制，需注意監聽者數量以避免事件風暴。 |
| Polling | 以固定間隔重新取得資料的策略，Inertia usePoll 提供多種模式控制。 |
| Queued Events | 廣播事件預設排入佇列，由 ShouldBroadcast 介面標示，可由 managed queues 非同步處理。 |
| Instant Events | 使用 ShouldBroadcastNow，事件透過 sync queue 即時廣播，延遲最低但可能影響吞吐量。 |
| Managed Queues | Laravel 新推出的託管佇列服務，簡化佇列基礎設施管理。 |
Laravel 生態系的即時套件整合（Reverb 第一方、Echo 客戶端、Octane 加速、managed queues）大幅降低了建立即時協作應用的門檻。過去需要自行管理 Socket.io、Redis、橫向擴展等複雜架構，現在 Laravel 提供了一條龍方案，使中小型團隊能與 Figma、Notion 等巨頭競爭，尤其是在利基市場。這意味著 PHP 開發者不再被排除在即時應用領域之外，且能更專注於產品功能而非基礎設施。
即時協作應用正從生產力工具轉向情感連結的載體。Joe 提到遠端工作的孤獨感，暗示這類應用有潛力成為「虛擬第三空間」。在混合辦公常態化的時代，能提供同步存在感（presence）與共同體驗的軟體將獲得使用者黏著度。Laravel 擁抱這種趨勢，顯示框架不僅在技術上與時俱進，也理解當代軟體背後的社會需求。
架構思維必須轉變。事件驅動的發佈/訂閱模型與傳統請求/回應有本質差異，開發者需重新思考資料流、狀態同步與衝突解決。Laravel 雖然抽象了底層複雜度，但不代表可以忽略分散式系統的挑戰。未來，我們可能看到更多 Laravel 在 CRDT、樂觀併發控制等協作核心技術上的整合。演講提醒：選擇正確的即時等級（輪詢/佇列/即時/客戶端），遠比盲目追求最低延遲更重要。
- "Polling is a completely legitimate strategy that you can use to make real-time applications."（輪詢完全是建立即時應用的正當策略。）
- "You need to be hyper aware of who's listening and who's broadcasting."（你必須高度警覺誰在監聽、誰在廣播。）
- "It feels like a different experience. It feels exciting. It feels beautiful. And it makes you feel like you're just not fully alone on the internet."（那感覺像是不同的體驗。令人興奮、美麗，而且讓你覺得自己在網路上不那麼孤單。）
- "I love building things where people are collaborating and figuring it out and untangling that web."（我喜歡建立讓人們合作、釐清問題並解開複雜糾結的軟體。）
- "Everything was WebSockets in this."（這一切全都透過 WebSockets 串連。）
點擊展開完整字幕
0:00 Uh, up next is Joe Tannenbaum. Um, he is 0:03 the OSS team lead at Laravel. So, a lot 0:07 of that open source stuff that got 0:08 launched yesterday happened under Joe's 0:11 direction. Um, so he has been at Laravel 0:14 for a while. What I love about Joe is 0:18 he is just so curiosity driven. If 0:21 you've seen any of his CLI experiments 0:23 over the years, um, any of his wacky 0:26 ideas, kind of like what Christina was 0:28 talking about yesterday, this whimsical 0:30 artful software. Joe is a very artful 0:33 creative person, 0:35 and that comes through in every single 0:37 thing that he touches, and that comes 0:39 through in his talks. And so, we're 0:41 really lucky to have Joe here today to 0:44 talk to us about building real-time 0:46 collaborative apps with Laravel. So, 0:49 please welcome Joe Tannenbaum. 0:52 How we doing? 0:54 Whoa. 0:56 That's That's like 10x more than I 0:57 thought on day two of morning of Laravel 1:00 on day two. Uh, okay. Hello. 1:03 Heads up. This is optionally 1:05 participatory. If you want to 1:07 participate, if you do, and the Wi-Fi is 1:09 like, "We can't handle this." Maybe 1:11 switch to mobile. If you if you want, 1:13 it's up to you. 1:14 Just a heads up. Okay. 1:19 Great. My Wi-Fi's working. That's good. 1:21 Okay. We are building We're going to 1:23 talk about building real-time 1:25 collaborative apps with Laravel. 1:28 Okay, everybody's scanning. Good, good. 1:30 >> [laughter] 1:31 >> Um, and we're going to be talking about 1:32 the building blocks that the ecosystem 1:34 provides, the first-class building 1:35 blocks that they provide that allows us 1:38 to build apps like this. So, it's a 1:39 little bit intro, but I think mostly 1:41 we're just going to really have some fun 1:42 today, as we're already having. This is 1:44 delightful. I tested this over and over 1:47 with two phones that I was frantically 1:48 working with. So, to see more people of 1:51 this makes me very happy. 1:53 Okay, great. 1:55 Uh, who am I? My name is Joe Tannenbaum. 1:58 I am currently RAINING EMOJIS. WHOA, 2:01 MAMA, HERE WE GO. 2:03 >> [laughter] 2:04 >> OKAY. OKAY. OKAY. 2:10 This is going to be an interesting 25 2:11 minutes, y'all. 2:12 >> [laughter] 2:13 >> OH MY GOD. 2:15 I AM JOE TANNENBAUM. UH, you can find me 2:17 online at joetannenbaum.com or jo.codes. 2:19 I am the open source lead engineer at 2:21 Laravel. My computer is probably 2:23 crashing right now. You guys are 2:25 amazing. 2:27 I'm a little scared right now. Okay. 2:29 >> [laughter] 2:30 >> Uh, I also live in New York City. If 2:31 you're ever in New York City, hit me up. 2:33 I'd love to hear from you. Um, and we're 2:35 going to switch slides. I hope it works. 2:39 Okay, yes. This is the team I get to 2:41 work with. This is the open source team. 2:43 If you enjoyed uh, some of the 2:45 announcements in the open source part of 2:47 uh, the keynote yesterday, these are the 2:49 people uh, that you get to thank. And a 2:51 lot of them are here. They're super kind 2:52 and nice people. I love them so much and 2:54 I'm honored to work with them. So, go 2:56 say hi, strike up a conversation. Uh, 2:58 I'm sure they'd love to hear from you. 3:00 So, 3:02 this is the stack we're going to be 3:02 working with. We are going to be working 3:04 with Laravel Cloud. Obviously, 3:05 everything is deployed on Laravel Cloud. 3:07 We are working with Reverb. Reverb is 3:10 our first-party WebSocket server, okay? 3:14 Uh, we are working with Echo. This is 3:17 This is so much more insane than I ever 3:19 thought it was going to be. 3:21 >> [laughter] 3:21 >> And I love every second of it. Um, we're 3:23 going to be working with Echo. That's 3:24 the client-side companion to Reverb. So, 3:27 it allows you to send and receive uh, 3:28 WebSocket events via JavaScript. And 3:31 we're going to be working with Octane. 3:33 Uh, Octane basically boots your app on 3:36 deploy and keeps it in memory. So, it 3:38 allows you to just like sling HTTP 3:40 requests as fast as possible, as you're 3:41 literally seeing right now. Um, so, 3:44 that's the stack we're working with, 3:45 just so you have sort of like a 3:46 baseline. 3:48 Okay. 3:51 Let's get to know our neighbors. If you 3:52 have somebody to your right, scan the QR 3:54 code on their phone. If you have 3:56 somebody in front of you, scan the QR 3:58 code on their phone. And if you don't, 4:01 that's fine. And while we're here, 4:04 introduce yourself. Make a friend. 4:06 Make plans for lunch. I don't know. 4:08 We're at Laracon. 4:09 Let's connect. 4:12 Okay. 4:14 Okay. This is working. We should start 4:16 to see some semblance of 4:18 what the audience looks like shortly. 4:25 Okay. Good. Everybody's very good at 4:27 following instructions. 4:30 We got a lot of islands. Maybe a lot 4:31 Okay, maybe got some people that aren't 4:36 Everybody scanned? 4:39 Still working? 4:41 I still see the shifting, so I'm 4:42 assuming scanning is still happening. 4:48 >> [laughter] 4:49 >> This is a lot different than with like 4:50 two phones and two other people. 4:52 >> [laughter] 4:55 >> But it's a lot more fun, too. It's like 4:57 the worst game of Tetris, it looks like. 5:00 Okay. We're going to assume everybody's 5:02 scanned at this point, or pretty close 5:04 to it. 5:06 Now, we're going to do something that's 5:07 going to be rad as hell if it works and 5:08 terrible if it doesn't. Uh 5:11 everybody just hold up your phones like 5:13 this. 5:14 I don't even know if I'm going to be 5:15 able to see everybody. 5:16 Uh I'm going to do a quick 5:18 calibration on my phone. 5:20 And then 5:24 are we seeing anything on our phones, or 5:26 is this just for me? 5:28 Are we calibrated? Show me your phones. 5:30 Flip your phones around. 5:33 Okay, pretty close to being rad as hell. 5:35 Not quite rad as hell, but we're It is 5:38 cool. It's cool from where I'm sitting. 5:40 Okay, cool. All right, so we're 5:41 calibrated. 5:43 So, what did we just do? We just had a 5:44 bunch of mini apps, right? Every one of 5:48 those was a real-time collaborative 5:49 application that um was happening in 5:52 real time. They were just little games 5:53 that we could play, right? 5:55 So, let's talk about what is behind 5:58 those little games. 6:01 Oops, I didn't press it. 6:03 There we go. Okay, this is how we start. 6:05 PHP artisan install broadcasting. This 6:07 kicks off the whole process. This sets 6:09 up everything server-side you need. It 6:11 optionally sets up everything 6:12 client-side that you need. So, it 6:14 detects the library that you're using 6:16 and sets up and configures your 6:17 client-side as well. By the time you're 6:19 done with this command, you are ready to 6:21 be broadcasting. You could do cool stuff 6:22 like this. A lot of cannonballs being 6:25 hit. Okay. Um 6:28 One of the main things it does is it 6:29 sets up this channels.php, right? So, 6:31 channels.php lives in your routes 6:33 directory. 6:36 It lives alongside your web in your API 6:38 files. 6:39 And it sets up the channels that you are 6:41 going to be broadcasting to in your 6:42 application. And it sets up 6:44 authorization for those channels as 6:46 well. So, let's let's zoom in a little 6:48 bit. 6:50 If you're building a real-time 6:51 collaborative app, probably one of the 6:52 first things you want to do is you want 6:54 to know who's here, right? You want a 6:56 presence channel. Who is present? So, 6:58 this is how you set up a presence 7:00 channel in Laravel in your channels.php. 7:03 You define the channel name. 7:05 And then you get a callback. And that 7:07 callback has the currently authenticated 7:09 user, right? And you decide is this user 7:12 able to join this channel? Are they 7:14 authorized to join this channel or not 7:15 authorized? And if they are, you return 7:17 an array of information about them. And 7:19 if you don't, you return null. And then 7:21 Echo will stop trying to connect to the 7:22 channel, and it will abort the 7:23 connection. 7:25 Okay, what does it look like on the Echo 7:26 side? 7:27 On the Echo side, use Echo presence. 7:29 Specify that channel name. Once you're 7:31 connected, you get a here callback. And 7:34 the here callback has a list of all of 7:37 the users that are connected. And that 7:38 includes you. You are also connected. 7:42 So, it's a list of all of the users that 7:43 are connected. You can do that 7:44 information what you will. As you as 7:47 people are coming and going, you get the 7:48 joining and leaving callbacks. And you 7:50 get the user that has joined or left. 7:52 You could have a list of users and list 7:53 them out. You could have a count. It 7:54 doesn't matter. You can do whatever you 7:56 want with that information. In this 7:57 case, we're just counting how many 7:58 people 8:00 are in the channel. 8:01 More often than not though, you're going 8:03 to be using private channels. And 8:04 private channels look like this. You 8:06 specify the channel name. You get that 8:08 user again, but you specify a boolean, 8:10 okay? So, these are channels that 8:11 require authentication [snorts] 8:13 to connect to. They're not public 8:14 channels, they're private channels. And 8:16 you determine it just the same way you 8:17 did with the presence channel. It's just 8:19 a private channel. And you return the 8:20 boolean instead of a null or an array. 8:24 On the consuming side, 8:25 we use use echo. You specify the channel 8:28 name, any events that you want to listen 8:30 to, and then you get that that event 8:33 back with any data, and you can do 8:34 whatever you want with that data. 8:36 Now, sometimes you want to bypass the 8:38 app altogether. You don't want to use 8:41 the app server, you want to go client to 8:42 client. And you can totally do that with 8:44 echo. And you do that by whispering, 8:46 okay? You connect to the channel. That 8:48 does fire one authentication request to 8:51 the server. So, that's the one 8:52 interaction. 8:53 But after that, you can whisper events 8:56 and listen for events, and it just goes 8:57 straight to the web socket server and 8:59 then back down, right? It fans out to 9:01 everybody, okay? So, this bypasses the 9:03 app server altogether. When I was doing 9:05 this flashlight thing, that was had 9:07 nothing to do with the app server. It 9:08 was all web socket all the way down, 9:10 okay? 9:12 Now, I just said something kind of 9:13 important and something you need to 9:14 think about when architecting these 9:15 apps. 9:17 So, that's fan out, okay? 9:19 You can barely see it behind all of the 9:21 the explosions here. But fan out is a 9:23 really important concept. 9:25 You need to architect these apps and 9:27 these channels so that you know who's 9:29 listening and who's broadcasting. And 9:32 you need to be like hyper aware of that. 9:34 And what I mean is, 9:35 when you use one of these echo hooks, 9:37 they will connect to the channel. The 9:39 moment you connect to the channel, you 9:41 are receiving all events. The browser is 9:44 receiving all the events. The callbacks 9:46 will filter for the event that uh you 9:49 specified, but you will be receiving all 9:51 of the events. So, 9:53 imagine when everybody's tapping 9:55 earlier, if everybody was connected to 9:57 that channel at the same time, it would 9:59 be exponential, right? There's so many 10:01 events. Everybody would be getting 10:03 everybody's events in this audience. So, 10:04 instead, you all tapped, you sent a 10:07 request to the app, the app broadcast, 10:09 and I was the only one listening, if 10:11 that makes sense. So, that's something 10:12 you need to think about, right? Who 10:14 actually needs to be connected on the 10:15 client side, and who should just be 10:17 broadcasting through the app is an 10:18 important concept in all of this. 10:21 Okay. 10:23 Let's have some fun. Okay? You should be 10:25 splitting into two teams, right? 10:28 Red and blue. 10:29 But those are such boring names. We 10:31 don't like red and blue. That sucks. 10:33 Anybody on the red team want to shout 10:34 out a chill PG name for your team? 10:38 >> [laughter] 10:42 >> Nope. What? 10:45 Rhinoceros? You're going to make me 10:47 spell rhinoceros? Okay. 10:49 R-h-i-n-o-c-e-r-o-s. 10:50 Rhinoceros. 10:52 Okay. Sure. Blue team? 10:55 Huh? 10:56 Elephant? All right. We're at a PHP I'll 11:00 I'll I'll let it be. Okay. 11:02 Okay, we're the rhinoceros and elephant. 11:04 We're going to talk about uh several 11:06 methods of doing real time from the 11:08 least real time to the most real time, 11:10 okay? The The least real time is 11:12 polling, but it's still a totally 11:13 legitimate strategy. So, we're going to 11:16 play a little game. It's the reaction 11:18 time game, okay? This is polling. You 11:20 can see in the upper corner there, every 11:22 2 seconds it's fetching new data from 11:24 the server and rehydrating, okay? 11:26 I'm going to press a button here. 11:29 We're going to do five rounds of 11:30 reaction. You're going to tap as soon as 11:32 you see a tap on the screen, 11:34 and we're going to see which team can 11:35 react faster. Are we ready? Are we set? 11:38 Right now, Inertia versus Eleven, go. 11:44 Woo, this is close. 11:49 Okay, so as people are tapping, it's 11:51 fetching that new data from the server. 11:53 It's refreshing the board. 11:57 Oh, this is tighter than I thought it 11:59 was going to be, to be honest. 11:59 [laughter] 12:02 Okay. 12:05 Okay, so that's polling. 12:07 We got new data every 2 seconds. That's 12:09 real time, if that's good enough for 12:11 your app, and that's totally fine. 12:12 Polling is a completely legitimate 12:13 strategy that you can use to make 12:15 real-time applications, okay? 12:18 Uh polling in Inertia is super easy. 12:21 Uh use poll, you specify the interval, 12:24 you can specify any data if you want 12:26 only specific data. We also have some 12:28 new modes to get really granular control 12:30 over that polling. So, we have new modes 12:32 that are cancel, overlap, and rest. 12:34 Cancel will cancel any outgoing request 12:36 that's currently polling and supersede 12:38 it with the new requests. Overlap will 12:42 overlap with the requests. I know, it's 12:44 crazy. Uh and rest will wait for that 12:46 last request to actually finish before 12:48 starting its request finishing and then 12:51 setting the timer. So, you get to 12:52 control how polling works in your app. 12:55 Um so, that's polling. Totally legit for 12:57 a lot of use cases. Let's take it to the 12:59 next level. Let's do uh queued events. 13:02 Okay, by default, when you broadcast an 13:04 event from the Laravel app, it is 13:07 queued, okay? 13:09 I'm going to go to the next screen. You 13:10 will have the opportunity to send three 13:13 jobs to the queue, and we're going to 13:15 see which teams processes first. Ready, 13:19 set, goish. 13:23 Okay, this is using the new managed 13:25 queue stuff that we just launched 13:26 yesterday. So, that queue went from 13:28 zero on to actively processing these 13:31 jobs. 13:33 Rhinoceros wins. Okay, go team 13:36 rhinoceros. 13:37 Let's go. All right. You can't tell cuz 13:40 it's all red and rhinoceros is also red, 13:42 but you know, that's that's what we're 13:44 doing. Okay, cool. So, that's queued. 13:46 What does that look like? 13:47 Uh this is what the job looks like. It 13:49 implements should broadcast. That 13:50 indicates that it should be queued and 13:52 by default it is queued on whatever your 13:54 default queue driver is, right? So, if 13:56 it's like if you're using the managed 13:57 queues, it'll queue on that. You just 13:59 specify which channel it needs to be 14:01 broadcast on and it's easy as that. It 14:02 it gets serialized, it gets pushed in 14:04 the queue, once it's processed, it gets 14:06 thrown out to the web socket and you can 14:07 listen for that event. 14:10 But sometimes you need 14:12 an instant event, 14:14 right? So, an instant event, there are 14:16 times when you need to process things in 14:18 real actual time. And so, we're now 14:20 going to play a game. This is the part 14:22 that I'm the most nervous about. We're 14:25 going to play a game that looks like 14:27 this. Okay? 14:30 You nothing to do yet. Hold on. I saw 14:31 everybody look down at their phone. Hold 14:32 on. 14:33 >> [laughter] 14:34 >> We have two bars here. As everybody 14:36 starts tapping, the bar a progress bar 14:38 is going to fill up. You collectively 14:41 have to be in the target zone for 5 14:44 seconds to win this game. So, if you see 14:46 the bar turn green, you're in the target 14:49 zone and everybody should stop tapping 14:52 unless you're a jerk, okay? 14:55 Okay? Everybody Everybody's got 14:58 Everybody Okay, here we go. 14:59 Ready, set, go. Tiger range is 66 Oh 15:04 boy, yeah, this is going to be 15:06 Everybody chill. Everybody chill. We're 15:08 tapping way too much. Everybody go pump 15:10 the brakes. Oh, yeah, we're feeling the 15:12 rhythm of it. Oh my god. 15:17 Okay, maybe one person to Can you just 15:18 tap for your friend? I'm just 15:23 Y'all, come on. This is it. 15:27 OH. 15:29 >> [groaning] 15:30 >> OH. OH. OKAY, SLOW DOWN. EVERYBODY JUST 15:33 SLOW DOWN. Slow down. Okay, yes, yes. 15:35 Everybody stop. Chill, CHILL, CHILL. 15:37 CHILL. CHILL. 15:37 >> [screaming] 15:39 >> Y'ALL, COME ON. 15:43 OH. OH. OH. STOP. STOP. RIGHT NOW, JUST 15:45 CHILL. 15:47 OH MY GOD. 15:49 THE TIMER WAS RIGHT THERE. WAIT. OH. 15:55 YES. 15:57 YES, it's fine. It's okay. It should be 15:59 We have a winner. We should have a 16:00 winner. That should have been a winner. 16:02 What happened? Oh my god, am I broke? 16:12 Come on. 16:15 Okay, I may have to nix this. I'm 16:17 worried that like it's going to Okay, 16:20 the elephant chilled. No, stop, stop. 16:21 Everybody stop. 16:25 That's a definitive winner. Maybe it's 16:26 just too much for the browser. What are 16:28 we doing? Stop. Okay. 16:34 Okay, forget it. Forget it. We're nixing 16:36 it. I Here's the deal. Here's the deal. 16:38 I had three more rounds of this where 16:40 the range got tighter. We ain't doing 16:41 that. That's not happening. 16:43 Uh so, we are fully, fully nixing that. 16:47 Okay. 16:49 >> [laughter] 16:50 >> We're going to have a very funny moment 16:52 in a second that is going to look so 16:54 chaotic. Um 16:56 Actually, I don't even know if it's 16:57 going to work cuz we didn't finish a 16:58 round. Uh we'll see. Uh so, to do that, 17:02 you'll just see that it's exactly the 17:03 same as the broadcast, but it 17:04 should broadcast now. And what should 17:07 broadcast now does, that's what it 17:08 implements, uh it puts it onto the sync 17:11 queue, okay? So, it's still queuing it, 17:13 but it's putting on your sync queue, 17:14 which makes it broadcast immediately, 17:17 right? 17:18 Okay. 17:19 Um, I don't know how this is going to 17:21 go. We're going to go to the next 17:21 screen. It might be insane. It might not 17:24 work. It might 17:25 Okay, here we go. 17:26 The cool thing about this is that Oh, 17:28 it's working. Uh, you can replay 17:29 everything in in 5x speed if you wanted 17:32 to. So, this is the game we just played. 17:33 We can watch it fail over and over and 17:35 over again. Uh, 17:37 I'm so curious. I wonder why it didn't 17:39 mark those as winners. We're still Yeah. 17:42 So, anyway, you saved all that stuff 17:44 server-side. You're sending it through 17:45 the app, so you can process it however 17:46 you want. We saved all of those taps, 17:49 and they all got saved and and we're 17:51 replaying them as they would actually 17:53 played out in real time at 5x speed, if 17:56 that makes sense. 17:59 This is 18:00 fascinating to watch at this. 18:05 Okay. 18:06 Okay. 18:09 So, let's talk about what we talked 18:10 about. All right. We talked about 18:12 Reverb. We talked about Echo. These are 18:14 the better apps of real-time 18:16 collaborative applications in Laravel, 18:19 okay? Reverb is the is the first-party 18:21 WebSocket server. Echo is the client 18:24 companion to that. We talked about 18:25 polling. Polling is totally legitimate 18:28 use case for many apps, and you should 18:29 probably reach for polling first before 18:32 you reach for WebSockets and see if it 18:33 actually suits your app use case. 18:36 We then talked about queued events. 18:39 Queued events are a step up from 18:40 polling, and they allow you to process 18:42 them as you want to as opposed to 18:44 process them in real time uh at the 18:46 moment that they happen. 18:49 We talked about instant events, 18:51 which you saw very clearly from this tap 18:52 game. That was that did not play out the 18:53 way I thought it was going to be, but 18:55 here we are. 18:55 >> [laughter] 18:56 >> And we talked about client events. We 18:57 touched on that shortly. So, 19:00 um, when you want to bypass the server 19:01 altogether, you can actually just go 19:03 straight to the WebSocket server. You 19:05 can whisper things back and forth, and 19:07 um, and that is a uh solid way to do it 19:10 if you don't need the app server in 19:11 these moments. 19:14 Okay, before we wrap up 19:17 somebody on their phone 19:18 it says green winner. 19:21 Who is it? 19:23 What's your name? 19:24 Ben? Okay, Ben didn't listen to my talk. 19:27 He won the cannon game. 19:28 Um which is fine. Ben, that's totally 19:30 fine. We salute you, Ben. Uh what's your 19:32 score? Shout it out. 19:35 238? 19:39 Ben. 19:41 Salute that Give it Give Ben a round of 19:43 applause, for real. 19:46 Holy cow. 19:48 Um so Ben, pop quiz. What's broadcasting 19:51 in Laravel? Do you know? Is that 19:53 >> [laughter] 19:53 >> No, is that 19:54 You probably did it. 19:55 You got glasses, you probably know 19:56 what's going on. 19:58 Uh uh 19:59 Okay. 20:00 So 20:01 why are we building apps like this 20:03 beyond like the challenge of building 20:05 apps like this? Um 20:07 I love building real-time applications. 20:09 I love building things where people are 20:10 collaborating and figuring it out and 20:12 untangling that web. 20:14 But the thing is that like most of us I 20:16 I don't want to speak for you, but for 20:17 me like I'm a remote worker. I sit at my 20:19 desk. I sometimes don't see people for 20:22 days at a time, like actually see people 20:24 outside of like my wife and child. But 20:27 uh you know, it's it can be a little 20:28 lonely and when you stumble across 20:31 apps that are real-time and 20:33 collaborative and done really well 20:36 um 20:37 it feels like a different experience. It 20:39 feels a little bit different than the 20:41 web that we're used to. It feels 20:43 exciting. It feels beautiful. And it 20:45 makes you feel like you're just not 20:47 fully alone on the internet. And we are 20:50 all now a sweeping gradients of color as 20:54 we Ah, this is beautiful. This is great. 20:57 Um that's my time. I hope you enjoy the 21:01 rest of Laracon. Thank you so much for 21:02 listening. I appreciate it. And I'll see 21:05 you next time. 21:12 >> Man. Went a little early. 21:14 >> I thought I had two more rounds of that 21:15 game. You know what? 21:16 >> Are you kidding me? 21:17 >> what it is. It plays out how it plays 21:18 out. 21:18 >> That is amazing. I was sitting backstage 21:20 and thinking 21:21 I hope he remembers that this is 21:23 streamed. And so all the 21:25 >> You think I didn't geo-fence this, 21:26 brother? 21:27 >> Oh, okay. There we go. 21:29 >> popped in, they had to verify their 21:30 location. 21:30 >> Oh, thank goodness. 21:31 >> you're on stream and you figured out how 21:32 to like spoof that, you're allowed in. 21:34 You're fine. 21:35 >> Yes. Okay, I was like, this is going to 21:37 crash immediately. 21:38 >> Oh, no. This is 10,000 people. Okay, 21:39 perfect. I feel bad asking for location 21:41 permissions. I hate doing that, but it's 21:43 okay. 21:43 >> It's okay. 21:43 >> But now that you have them 21:46 Uh anyway. 21:47 >> Oh, you all are in Boston? Interesting. 21:49 >> Ha, anyway. So 21:53 Uh one thing I want to ask you about is 21:55 these slides, your process of prepping, 21:57 like 21:57 >> Yeah. 21:59 >> Uh like I said earlier, you heard it, 22:00 you were over there. You're just so like 22:02 driven by creative creativity, 22:04 curiosity. 22:06 Um but you're also deeply technical. So 22:07 how do you prepare for something like 22:10 this? Cuz your CLI stuff was always 22:12 super entertaining. This is incredible. 22:14 So like what's your process? 22:16 >> I for this one um 22:18 I was like, okay, what are the concepts 22:19 I want to get across? And I originally 22:21 was going way deeper and then I was 22:23 like, I only have 25 minutes. I can't go 22:24 that deep. I need to lay like a 22:25 baseline. So I just came up I tried to 22:28 come up with games that correlated to 22:30 those concepts. And those games looked 22:31 like garbage in the beginning. They 22:32 looked like, you know, white background, 22:34 black text. 22:35 >> Yeah. 22:35 >> But um 22:37 Yeah, it was a list of like introduce 22:39 concepts, here's the game, this is why 22:42 it relates to that concept. That was 22:43 like the whole 22:44 >> had one thing you wanted to teach and 22:45 like how can I 22:46 >> Yeah, and how can I make an interactive 22:48 a fully interactive game out of teaching 22:50 that? And was this just fully a web app 22:52 >> Fully web app on the screen. 22:53 >> So I was controlling this from my phone. 22:56 There's an admin side to this. So there 22:58 was slides and then a remote control 22:59 that I made on my phone that was still 23:02 doing broadcasting. So, everything 23:04 everything was WebSockets in this. 23:06 >> Well, that was incredibly impressive. 23:08 Y'all Y'all give it up for Joe. 23:10 >> Thank you very much, everyone. Thank 23:11 you. 23:12 Thank you.