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


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="outlog" src="/assets/icons/user-9f439610.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  outlog
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>I just have “users:all” and a “users:#{user_id}” - then the “public” stuff goes over the :all chan and the “private” stuff over the :user_id chan..</p>
<p>but all depends of course.. if you have 10k different chat rooms you definitely want a chan for each and dynamic join/leave on the client..</p>
<p>since I load all state from the get go in an “after_join” I maintain all state updated through chans no matter where the user navigates around (ie. no spinning loader etc.) - but a larger app with loads of data could be different..</p>
<p>eg. in the admin app (which is react js - but still redux-observables) I load data dynamically as you navigate around (since “data” is big)</p>
<p>so +1 on a generic chan - and then I assume requirements sooner or later will need a user_id chan… ymmv but KISS always win <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> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="126218" 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/should-i-use-channels-or-a-regular-json-web-endpoint-for-my-react-native-app/21901/12">Post #11</a>
	                </div>
	            </div>
              <div id="likers-container-126218" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="126218"
                     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 #11"></div>
  </section>
</div>
    <div class="postbit" id="126219" data-post-id="126219">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="yukster" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/yukster/120/13609_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  yukster
                    <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>Interesting. I’m going to at least start with that approach. For the foreseeable future, my mobile app will only display one user’s data and shouldn’t really be all that much data.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="126219" 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/should-i-use-channels-or-a-regular-json-web-endpoint-for-my-react-native-app/21901/13">Post #12</a>
	                </div>
	            </div>
              <div id="likers-container-126219" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="126219"
                     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="126561" data-post-id="126561">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="yukster" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/yukster/120/13609_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  yukster
                    <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>So I successfully hooked up my channel to my react native app… but it was re-rendering over and over. Man, that makes my laptop very sad. So, I started following the approach outlined here:</p>
<p><a href="https://medium.com/flatiron-labs/improving-ux-with-phoenix-channels-react-hooks-8e661d3a771e" class="onebox" target="_blank" rel="noopener nofollow ugc">https://medium.com/flatiron-labs/improving-ux-with-phoenix-channels-react-hooks-8e661d3a771e</a></p>
<p>using this lib: <a href="https://github.com/alexgriff/use-phoenix-channel" class="inline-onebox" rel="noopener nofollow ugc">GitHub - alexgriff/use-phoenix-channel · GitHub</a></p>
<p>And my channel connects fine and my after_join handler fires and I see my data in the payload. But the UI never updates. Funny that first it re-rendered over and over and now I can’t get it to render the data at all.</p>
<p>I suppose this is a React Native issue rather than an Elixir/Phoenix issue, so I should find a RN forum to ask on. But if anyone has any tips or tutorials they can refer me to, I’d much appreciate it.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="126561" data-batch-url="/posts/batch_likers">
                        1
                      </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/should-i-use-channels-or-a-regular-json-web-endpoint-for-my-react-native-app/21901/14">Post #13</a>
	                </div>
	            </div>
              <div id="likers-container-126561" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="126561"
                     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="126593" data-post-id="126593">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="yukster" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/yukster/120/13609_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  yukster
                    <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>Ha. Helps to carefully read the docs. I was trying to destructuring my state out of an <em>object</em> returned from <code>useChannel</code> instead of an array as the README clearly states. It’s now hooked up and working fine.</p>
<p>I’m surprised there doesn’t seem to be much uptake for that <code>use-phoenix-channel</code> library. It’s not a lot of code, but it’s a nice abstraction and saves a little bit of work. Then again, we’ll see how I feel once I have a lot more data to deal with.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="126593" data-batch-url="/posts/batch_likers">
                        3
                      </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/should-i-use-channels-or-a-regular-json-web-endpoint-for-my-react-native-app/21901/15">Post #14</a>
	                </div>
	            </div>
              <div id="likers-container-126593" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="126593"
                     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="126942" data-post-id="126942">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="yukster" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/yukster/120/13609_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  yukster
                    <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><a class="mention" href="/u/outlog" rel="nofollow">@outlog</a> I got the channel code working fine in development, but writing tests is problematic. I get <code>ReferenceError: window is not defined</code> for any test of a component using the Phoenix socket. I clearly need to mock that, or fake the DOM… or try to separate out the channel code so that it doesn’t get invoked. Any testing tips would be appreciated.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="126942" 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/should-i-use-channels-or-a-regular-json-web-endpoint-for-my-react-native-app/21901/16">Post #15</a>
	                </div>
	            </div>
              <div id="likers-container-126942" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="126942"
                     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="127832" data-post-id="127832">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="yukster" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/yukster/120/13609_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  yukster
                    <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>One more follow-up here in case someone else tries to go down this path: I got channel communication working fine in iOS but have been struggling to get it working in Android. I think this is because Android 9 and above require secure network communications. I’ve changed my socket setup to use <code>wss://</code> and created a self-signed cert and SSL endpoint in my app, but it still fails. Looking into how to get the Android emulator to accept that cert. Funny that it’s iOS that works fine!</p>
<p>Anyway, wanted to drop an update here… and if anyone has a tip on getting the <code>wss://</code> socket working easily on Android, I’d love it. It seems like that should just work out of the box!</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="127832" 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/should-i-use-channels-or-a-regular-json-web-endpoint-for-my-react-native-app/21901/17">Post #16</a>
	                </div>
	            </div>
              <div id="likers-container-127832" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="127832"
                     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 #16"></div>
  </section>
</div>
    <div class="postbit" id="127893" data-post-id="127893">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="outlog" src="/assets/icons/user-9f439610.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  outlog
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>what URI are you connecting to from the android emulator?<br>
(localhost will not work - you need to use an IP.. in my experience mdns ie .local is also flawed(not working) on android..)</p>
<p>ios only works because you most likely have exempted localhost in NSAppTransportSecurity</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="127893" 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/should-i-use-channels-or-a-regular-json-web-endpoint-for-my-react-native-app/21901/18">Post #17</a>
	                </div>
	            </div>
              <div id="likers-container-127893" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="127893"
                     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 #17"></div>
  </section>
</div>
    <div class="postbit" id="127912" data-post-id="127912">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="yukster" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/yukster/120/13609_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  yukster
                    <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>Thanks <a class="mention" href="/u/outlog" rel="nofollow">@outlog</a>! Unfortunately that is not fixing the Android socket connection for me, at least not just changing <code>localhost</code> to <code>127.0.0.1</code>. Still works great in iOS, but Android still makes no apparent network attempt.</p>
<p>I started trying to add a network_security_config.xml to the Android app, but at least initially, that broke the emulator’s connection to the Metro Bundler Server. I’m still working on figuring out what I’m missing, but it would be very helpful to know if you had to mess with any Android configuration in order to get your Phoenix channel talking to Android. Thanks again!</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="127912" 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/should-i-use-channels-or-a-regular-json-web-endpoint-for-my-react-native-app/21901/19">Post #18</a>
	                </div>
	            </div>
              <div id="likers-container-127912" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="127912"
                     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 #18"></div>
  </section>
</div>
    <div class="postbit" id="127913" data-post-id="127913">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="outlog" src="/assets/icons/user-9f439610.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  outlog
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>you need the local IP ie 192.168.1.XX or whatever your computer/server is on..</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="127913" data-batch-url="/posts/batch_likers">
                        1
                      </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/should-i-use-channels-or-a-regular-json-web-endpoint-for-my-react-native-app/21901/20">Post #19</a>
	                </div>
	            </div>
              <div id="likers-container-127913" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="127913"
                     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 #19"></div>
  </section>
</div>
    <div class="postbit" id="127927" data-post-id="127927">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="yukster" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/yukster/120/13609_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  yukster
                    <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>Changed the socket url to my laptop’s IP (192.168.0.3), but I still don’t get data and the Phoenix app logs:</p>
<p><code>[info] ['TLS', 32, 'server', 58, 32, 73, 110, 32, 115, 116, 97, 116, 101, 32, 'certify', 32, 'received CLIENT ALERT: Fatal - Certificate Unknown', 10]</code></p>
<p>Are you using a self-signed cert and if so, did you have to load it onto your Android emulator?</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="127927" data-batch-url="/posts/batch_likers">
                        1
                      </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/should-i-use-channels-or-a-regular-json-web-endpoint-for-my-react-native-app/21901/21">Post #20</a>
	                </div>
	            </div>
              <div id="likers-container-127927" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="127927"
                     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 #20"></div>
  </section>
</div>
</template></turbo-stream><turbo-stream action="replace" target="load-more-container"><template><div id="load-more-container" class="load-more-container">
    <a class="load-more-button" data-turbo-stream="true" href="/topics/21901/load_more?page=3">Load more posts (4 remaining)</a>
</div></template></turbo-stream>