title: Why does my Laravel 8 `StreamedResponse` cause a second browser to hang when visiting the same endpoint?
body: <p>I have a Laravel 8 application that displays a QR code that, once scanned, triggers a webhook from a third party back to the server that hosts my site. Once that happens, I want to publish the event to the <strong>requesting</strong> session, privately, which I'm accomplishing with a Javascript <code>EventSource</code>:</p>
  <pre><code>var eventSource = new EventSource(&quot;/auth/{{ $requestId }}&quot;);
      eventSource.addEventListener('login', function(event){
      console.log(&quot;data from s&quot; , event.data);
  });
  </code></pre>
  <p>This works great when I do this with a single client (browser). When I open the same page in a different browser (and different session), the page does not load. If I terminate the initial session (close the browser), the second one finishes loading; it looks like I can only have one session at a time which is not ideal.</p>
  <p>What should I be doing differently to be able to handle multiple sessions waiting for private server-side events?</p>
  <p>The controller that displays the QR code:</p>
  <pre><code>public function showQrCode(Request $request)
      {
          $requestId = Str::uuid();
  
          ...
          
          return view('login', [ 'qrCodeImg' =&gt; $qrCodeImg, 'requestId' =&gt; $requestId ]);
      }
  </code></pre>
  <p>Login view:</p>
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;script&gt;
              var eventSource = new EventSource(&quot;/auth/{{ $requestId }}&quot;);
              eventSource.addEventListener('login', function(event){
                  console.log(&quot;data from s&quot; , event.data);
              });
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div&gt;Login Request ID: {{ $requestId }}&lt;/div&gt;
          &lt;div id=&quot;qr&quot;&gt;
              &lt;img src=&quot;{{ $qrCodeImg }}&quot;&gt;&lt;img&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>/auth/{requestId} controller:</p>
  <pre><code>public function loggedIn(Request $request, $id) // the $id param is the {requestId} from the URL
      {
          return response()-&gt;stream(function () use ($id) {
              while (true) {
                  if (connection_aborted()) {
                      break;
                  }
                  echo &quot;event: login\n&quot;, &quot;data: {$id}&quot;, &quot;\n\n&quot;;
                  if (ob_get_level() &gt; 0) {ob_flush();}
                  flush();
                  sleep(5);
              }
          }, 200, [
              'Cache-Control' =&gt; 'no-cache',
              'Content-Type' =&gt; 'text/event-stream',
          ]);
      }
  </code></pre>
  <p>Functionally, I'm using a UUID created for each session and sending it as the identifier for the third party. Once the QR code is scanned, the authenticated information is sent back to the server (to the <code>/auth/{requestId}</code> endpoint) to uniquely identify the login.</p>
  <p>Maybe my entire SSE pattern is the wrong approach all together, but it makes sense in my head so far.</p>