<turbo-stream action="append" target="posts_list"><template>    <div class="postbit" id="124820" data-post-id="124820">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="rjk" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/rjk/120/1293_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  rjk
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>i checked out your github project. It works correctly, the thing what happens is the following:<br>
during the controller action you broadcast a message and then render the page, the page connects to your websocket and misses the broadcast because it is too ‘slow’ (better said the broadcast is too fast as the page renders in 250µs during development <img src="https://forum.elixirforum.com/images/emoji/apple/wink.png?v=15" title=":wink:" class="emoji" alt=":wink:" loading="lazy" width="20" height="20"> ).</p>
<p>So it’s more the fact that you broadcast inside the controller action and expect to see it during it’s page render what’s now going wrong.</p>
<p>If you open another tab to the same page and you refresh the other one you’ll see that the broadcast fires fine because that other tab doesn’t have to do a full http page render (and let javascript connect to the websocket again.</p>
<p>If you want to actually see the broadcast that you’re sending rendered from the same controller action you have to introduce some delay in the broadcast itself (to make sure the page is already rendered and connected to your websocket before the broadcast is sent out) example code for this could be something like this:</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">defmodule RealTimeWeb.PageController do
  use RealTimeWeb, :controller

  def index(conn, _params) do
    Task.start(fn -&gt; 
    	:timer.sleep(100)
    	RealTimeWeb.Endpoint.broadcast!("PAGE", "WELCOME", %{data: "Welcome to Real Time Page"})
    end)
    render(conn, "index.html")
  end
end
</code></pre>
<p>(i wouldn’t do this in any production code, it’s just to show what is happening)</p>
<p>Hope this helps!</p>
<p>Redmar</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="124820" data-batch-url="/posts/batch_likers">
                        5
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/broadcasting-an-event-from-a-controller-doesnt-seem-to-work-myapp-endpoint-broacast-topic-event-payload/21724/13">Post #12</a>
	                </div>
	            </div>
              <div id="likers-container-124820" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="124820"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #12"></div>
  </section>
</div>
    <div class="postbit" id="124823" data-post-id="124823">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="thomasdola" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/thomasdola/120/11582_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  thomasdola
                    <span class="op-star" title="Thread Starter">
                      <img alt="OP" class="op-star-icon" src="/assets/thread-icons/thread-icon-thread-starter-df91e872.png" />
                    </span>
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Oooh… i see… so is there any way to do this..?</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="124823" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/broadcasting-an-event-from-a-controller-doesnt-seem-to-work-myapp-endpoint-broacast-topic-event-payload/21724/14">Post #13</a>
	                </div>
	            </div>
              <div id="likers-container-124823" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="124823"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #13"></div>
  </section>
</div>
    <div class="postbit" id="124825" data-post-id="124825">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="LostKobrakai" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/LostKobrakai/120/3072_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  LostKobrakai
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>http request are completely unrelated to channel connections, so it’s certainly not possible without some extra work. If the client is only connected in one tab/window and it’s not an ajax request, then there isn’t even a working channel connection to the client at the time your controller action is running, as the browser is currently in “going to another page” mode.</p>
<p>Can you describe a bit more what you want to actually happen in the end. Maybe there are more appropriate ways to get to the same result.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="124825" data-batch-url="/posts/batch_likers">
                        2
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/broadcasting-an-event-from-a-controller-doesnt-seem-to-work-myapp-endpoint-broacast-topic-event-payload/21724/15">Post #14</a>
	                </div>
	            </div>
              <div id="likers-container-124825" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="124825"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #14"></div>
  </section>
</div>
    <div class="postbit" id="124830" data-post-id="124830">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="thomasdola" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/thomasdola/120/11582_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  thomasdola
                    <span class="op-star" title="Thread Starter">
                      <img alt="OP" class="op-star-icon" src="/assets/thread-icons/thread-icon-thread-starter-df91e872.png" />
                    </span>
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>I have a Dashboard that displays</p>
<ul>
<li>Total of post</li>
<li>Total of daily views</li>
<li>Total of daily comments</li>
</ul>
<p>An API through which connected android app can read, comment on posts<br>
So the idea is when an android app open and read or comment a post i need to update the dashboard accordingly.</p>
<p>Post Api Controller</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">defmodule MyApp.API.PostController do

    use MyApp, :controller
  
    action_fallback MyApp.FallbackController

    def index(conn, params) 
        render(conn, "index.json", posts: posts, pagination: pagination)
    end

    def show(conn, %{"id" =&gt; post_id}) do
        post = News.get_post!(post_id)

        MyApp.Endpoint.broadcast!("DASHBOARD", "POST_READ", @data)

        MyApp.SystemLog.log(conn, "View", "Post")
        |&gt; render("show.json", post: post) 
    end

    def comment(conn, %{"id" =&gt; post_id, "message" =&gt; message}) do
        post_comment_params = %{message: message, client_id: client_id, post_id: post_id}

        with {:ok, %PostComment{} = c} &lt;- News.create_post_comment(post_comment_params) do
            # IO.inspect {:comment, c}
            %Post{} = post = News.get_post!(post_id)
            {feed_comments, pagination} = News.list_feed_comments(for: feed)

            MyApp.Endpoint.broadcast!("DASHBOARD", "POST_COMMENT", @data)

            MyApp.SystemLog.log(conn, "Comment", "Post")
            |&gt; render("comments.json", @data)
        end
    end    
end
</code></pre>
<p>But The above <code>MyApp.Endpoint.broadcast!()</code> calls not hitting the browser viewing the dashboard.</p>
<p>Dashboard Channel</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">defmodule MyApp.DashboardChannel do
    use MyApp, :channel
    
    @topic "DASHBOARD"

    @events ["POST_COMMENT", "POST_READ"]

    def join(@topic = topic, params, socket), do: _join(params, topic, socket)
    def join(_, _, _), do: {:error, %{reason: "unauthorized"}}

    defp _join(_params, topic, socket) do
        send(self(), {:after_join, topic})
        {:ok, socket}
    end

    def handle_info({:after_join, @topic}, socket) do
        Enum.each(@events, fn event -&gt; _broadcast(event, socket) end)
        {:noreply, socket}
    end

    def _broadcast("POST_COMMENT" = event, socket) do
        _do_broadcast(event, %{count: System.Dashboard.posts(:comments)}, socket)
    end
    def _broadcast("POST_READ" = event, socket) do
        _do_broadcast(event, System.Dashboard.posts(:reads), socket)
    end

    defp _do_broadcast(event, data, _socket) do
        # broadcast(socket, event, %{data: data})
        MyApp.Endpoint.broadcast!(@topic, event, %{data: data})
    end

end
</code></pre>
<p>And <code>MyApp.Endpoint.broadcast!()</code> call from the above channel works fine…</p>
<p>Dashboard Client side (js)</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">
import {Socket} from "phoenix"

let socket = new Socket("/socket", {params: {token: window.userToken}})

socket.connect()

let channel = socket.channel("DASHBOARD", {})

channel.on("POST_READ", data =&gt; console.log(data))
channel.on("POST_COMMENT", data =&gt; console.log(data))

channel.join()
  .receive("ok", resp =&gt; { console.log("Joined successfully", resp) })
  .receive("error", resp =&gt; { console.log("Unable to join", resp) })

export default socket

</code></pre>
<p>i hope this gives you enough info on what i want to acheive…<br>
thank you.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="124830" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/broadcasting-an-event-from-a-controller-doesnt-seem-to-work-myapp-endpoint-broacast-topic-event-payload/21724/16">Post #15</a>
	                </div>
	            </div>
              <div id="likers-container-124830" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="124830"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #15"></div>
  </section>
</div>
    <div class="postbit" id="350655" data-post-id="350655">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="necromorph23" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/necromorph23/120/36811_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  necromorph23
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Hey i am facing the same issue. Were you able to find a solution for this ?</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="350655" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/broadcasting-an-event-from-a-controller-doesnt-seem-to-work-myapp-endpoint-broacast-topic-event-payload/21724/17">Post #16</a>
	                </div>
	            </div>
              <div id="likers-container-350655" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="350655"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-last-post cat-last-post" title="Last post!"></div>
  </section>
</div>
</template></turbo-stream><turbo-stream action="replace" target="load-more-container"><template><div id="load-more-container" class="load-more-container">
    <span class="all-loaded">— All posts loaded —</span>
</div></template></turbo-stream>