Elixir Phoenix PubSub Tutorial - Revision history

Admin at 07:29, 29 October 2023

2023-10-29T07:29:01Z

← Older revision		Revision as of 07:29, 29 October 2023
Line 232:		Line 232:
	====handle_info====		====handle_info====

	This function is ~~used in GenServers~~. ~~When~~ used ~~with~~ a ~~Live View it listens for payload~~ data being ~~sent via the '''broadcast''' method~~.		This is a function that is invoked on any "send" event to a process. In our code it is used as a tool to capture the data being subscribed to.

Admin at 06:23, 29 October 2023

2023-10-29T06:23:26Z

← Older revision		Revision as of 06:23, 29 October 2023
Line 121:		Line 121:
	end		end

	~~# Topic~~
	~~defp topic do~~
	~~"message"~~
	~~end~~

	def render(assigns) do		def render(assigns) do
Line 186:		Line 182:
	Before explaining the code, the following summarizes the important parts applicable to all PubSub applications. Direct your attention to the three functions below. These functions are the main tools that you use when working with the PubSub API and it is important to get familiar with them.		Before explaining the code, the following summarizes the important parts applicable to all PubSub applications. Direct your attention to the three functions below. These functions are the main tools that you use when working with the PubSub API and it is important to get familiar with them.

	* Phoenix.PubSub.'''broadcast'''(App.PubSub, ~~topic~~, {:pubsub_transmission, text})		* Phoenix.PubSub.'''broadcast'''(App.PubSub, "message", {:pubsub_transmission, text})
	* Phoenix.PubSub.'''subscribe'''(App.PubSub, ~~topic~~)		* Phoenix.PubSub.'''subscribe'''(App.PubSub, "message")
	* ''' handle_info'''({:pubsub_transmission, text}, socket)		* ''' handle_info'''({:pubsub_transmission, text}, socket)

Admin at 06:18, 29 October 2023

2023-10-29T06:18:23Z

← Older revision		Revision as of 06:18, 29 October 2023
Line 205:		Line 205:


	====broadcast====		====Phoenix.PubSub.broadcast====

	1. In SendLive the code Phoenix.PubSub.broadcast is used to broadcast message data. This method takes three arguments.		1. In SendLive the code Phoenix.PubSub.broadcast is used to broadcast message data. This method takes three arguments.
Line 227:		Line 227:
	Phoenix.PubSub.broadcast( App.PubSub, "some-topic-goes-here",'''%{data: "hello world}''')		Phoenix.PubSub.broadcast( App.PubSub, "some-topic-goes-here",'''%{data: "hello world}''')

	====subscribe====		====Phoenix.PubSub.subscribe====
	The first two arguments of subscribe mirror broadcast.		The first two arguments of subscribe mirror broadcast.

Admin at 06:15, 29 October 2023

2023-10-29T06:15:42Z

← Older revision		Revision as of 06:15, 29 October 2023
Line 176:		Line 176:


	~~Before learning how this code works, first launch~~ the server and open up two browser tabs. Set one to /send and the other to /receive		Launch the server and open up two browser tabs. Set one to '''/send''' and the other to '''/receive'''

	Submit data from /send and view the result on /receive		Submit data from '''/send''' and view the result on '''/receive'''.

	Play with the code and explore it. Ensure that it works.		Play with the code and explore it. Ensure that it works.

	===~~Description~~===		===Explanation===

	Before explaining the code, the following summarizes the important parts applicable to all PubSub applications. Direct your attention to the three functions below. These functions are the main tools that you use when working with the PubSub API and it is important to get familiar with them.		Before explaining the code, the following summarizes the important parts applicable to all PubSub applications. Direct your attention to the three functions below. These functions are the main tools that you use when working with the PubSub API and it is important to get familiar with them.
Line 194:		Line 194:
	All PubSub applications are composed of these three functions.		All PubSub applications are composed of these three functions.

	===A ~~Useful~~ Mental Model===		===A Simple Mental Model===

	Mental Models are helpful not because they are 100 percent accurate but because they are tangibly useful. The mental model I use is as follows:		Mental Models are helpful not because they are 100 percent accurate but because they are tangibly useful. The mental model I use is as follows:

	The '''broadcast''' and '''subscribe''' functions are used to send data from one module to another. You can look at these functions a physical cable that connects modules together.		The '''broadcast''' and '''subscribe''' functions are used to send data from one module to another. You can look at these functions as two ends of a physical cable that connects modules together.
	The module(s) that transmits the data must contain the '''broadcast''' function in it's code, the module(s) receiving the data must contain the '''subscribe''' function in it's code.		The module(s) that transmits the data must contain the '''broadcast''' function in it's code, the module(s) receiving the data must contain the '''subscribe''' function in it's code.

	The receiving module must also contain a handle_info function. This function acts as an event handler that listens for and ~~allows you to capture~~ the ~~received~~ data.		The receiving module must also contain a handle_info function. This function acts as an event handler that listens for and captures the data.

Admin at 06:11, 29 October 2023

2023-10-29T06:11:24Z

← Older revision		Revision as of 06:11, 29 October 2023
Line 184:		Line 184:
	===Description===		===Description===

	Before explaining the code, the following summarizes the important parts applicable to all PubSub applications. Direct your attention to the three functions below. ~~For now, treat these~~ functions as the main ~~characters in a PubPub program~~.		Before explaining the code, the following summarizes the important parts applicable to all PubSub applications. Direct your attention to the three functions below. These functions are the main tools that you use when working with the PubSub API and it is important to get familiar with them.

	* Phoenix.PubSub.'''broadcast'''(App.PubSub, topic, {:pubsub_transmission, text})		* Phoenix.PubSub.'''broadcast'''(App.PubSub, topic, {:pubsub_transmission, text})
Line 198:		Line 198:
	Mental Models are helpful not because they are 100 percent accurate but because they are tangibly useful. The mental model I use is as follows:		Mental Models are helpful not because they are 100 percent accurate but because they are tangibly useful. The mental model I use is as follows:

	~~<hr/>~~		The '''broadcast''' and '''subscribe''' functions are used to send data from one module to another. You can look at these functions a physical cable that connects modules together.
	~~<blockquote>~~		The module(s) that transmits the data must contain the '''broadcast''' function in it's code, the module(s) receiving the data must contain the '''subscribe''' function in it's code.
	~~If the first two arguments of~~ broadcast and subscribe ~~match each other.~~...

	* Phoenix.~~PubSub~~. ~~broadcast ('''App.PubSub, topic''', {:pubsub_transmission, text})~~		The receiving module must also contain a handle_info function. This function acts as an event handler that listens for and allows you to capture the received data.
	* Phoenix.PubSub. subscribe ('''App.PubSub, topic''')

	~~Then...~~

	~~handle_info receives payload data from the broadcast.~~

	~~handle_info ('''{:pubsub_transmission, text}''', socket)~~


	~~</blockquote>~~
	~~<hr/>~~
	~~As long as handle_info is in the same Live View module as subscribe, it automatically listens for the incoming matching broadcast payload data.</u>~~

	~~=== Explanation ===~~
	====broadcast====		====broadcast====

Line 230:		Line 218:


			The second argument, called the topic, is a string that represents a connection between the broadcast function and a subscribe function. The topic connects them together.
	The second argument, called the topic, is a string that represents a connection between the broadcast function and a subscribe function. The topic connects them.

	Phoenix.PubSub.broadcast( App.PubSub, '''"some-topic-goes-here"''' )		Phoenix.PubSub.broadcast( App.PubSub, '''"some-topic-goes-here"''' )

	The third argument is the payload. This can be any data you want to transmit between Live Views ~~and can be any type of data~~.		The third argument is the payload. This can be any data you want to transmit between Live Views.

Admin at 05:03, 29 October 2023

2023-10-29T05:03:49Z

← Older revision		Revision as of 05:03, 29 October 2023
Line 18:		Line 18:


	The goal of this writing is to explain how to use the code provided by the PubSub API to build real time applications~~. The tutorial is divided into three parts, each part building on the completion of the previous one~~.		The goal of this writing is to explain how to use the code provided by the PubSub API to build real time applications.



	===Project Description===		===Project Description===
			The tutorial is divided into three parts, each part building on the completion of the previous one.

	* '''Part 1''': We create a two route live view app with each route assigned its own page. The two routes are '''/send''' and '''/receive'''.		* '''Part 1''': We create a two route live view app with each route assigned its own page. The two routes are '''/send''' and '''/receive'''.

Admin at 05:02, 29 October 2023

2023-10-29T05:02:59Z

← Older revision		Revision as of 05:02, 29 October 2023
Line 14:		Line 14:
	This tutorial explains the basics of building a Phoenix PubSub chat app.		This tutorial explains the basics of building a Phoenix PubSub chat app.

	~~The goal of this writing~~ is ~~to explain how to write code to build~~ Phoenix ~~PubSub applications~~. ~~The tutorial~~ is ~~divided into three parts, each part building on the completion of the previous one~~.		===What is PubSub?===
			PubSub is the Phoenix frameworks real time publish/subscribe service. This is an API that lets developers write applications that update in near real time such as chat rooms and multi-player games.

	~~'''~~Project Description~~'''~~
			The goal of this writing is to explain how to use the code provided by the PubSub API to build real time applications. The tutorial is divided into three parts, each part building on the completion of the previous one.



			===Project Description===

	* '''Part 1''': We create a two route live view app with each route assigned its own page. The two routes are '''/send''' and '''/receive'''.		* '''Part 1''': We create a two route live view app with each route assigned its own page. The two routes are '''/send''' and '''/receive'''.
Line 177:		Line 183:
	===Description===		===Description===

	Before explaining the code, ~~I would like to summarize~~ the important parts applicable to all PubSub applications. Direct your attention to the three functions below. For now, treat these functions as the main characters in a PubPub program.		Before explaining the code, the following summarizes the important parts applicable to all PubSub applications. Direct your attention to the three functions below. For now, treat these functions as the main characters in a PubPub program.

	* Phoenix.PubSub.'''broadcast'''(App.PubSub, topic, {:~~text_stuff~~, text})		* Phoenix.PubSub.'''broadcast'''(App.PubSub, topic, {:pubsub_transmission, text})
	* Phoenix.PubSub.'''subscribe'''(App.PubSub, topic)		* Phoenix.PubSub.'''subscribe'''(App.PubSub, topic)
	* ''' handle_info'''({:~~text_stuff~~, text}, socket)		* ''' handle_info'''({:pubsub_transmission, text}, socket)

	For brevity I refer to these as '''broadcast''','''subscribe''' and '''handle_info'''.		For brevity I refer to these as '''broadcast''','''subscribe''' and '''handle_info'''.
Line 195:		Line 201:
	If the first two arguments of broadcast and subscribe match each other....		If the first two arguments of broadcast and subscribe match each other....

	* Phoenix.PubSub. broadcast ('''App.PubSub, topic''', {:~~text_stuff~~, text})		* Phoenix.PubSub. broadcast ('''App.PubSub, topic''', {:pubsub_transmission, text})
	* Phoenix.PubSub. subscribe ('''App.PubSub, topic''')		* Phoenix.PubSub. subscribe ('''App.PubSub, topic''')

	Then...		Then...

	handle_info ~~''is enabled'' with the ability to listen for and receive~~ payload data from broadcast.		handle_info receives payload data from the broadcast.

	handle_info ('''{:~~text_stuff~~, text}''', socket)		handle_info ('''{:pubsub_transmission, text}''', socket)


	</blockquote>		</blockquote>
	<hr/>		<hr/>
	~~This may be confusing because you might assume handle_info would have to be given the same "topic" as the other two functions. This is not the case.<u>~~ As long as handle_info is in the same Live View module as subscribe, it automatically listens for the incoming matching broadcast payload data.</u>		As long as handle_info is in the same Live View module as subscribe, it automatically listens for the incoming matching broadcast payload data.</u>

	=== Explanation ===		=== Explanation ===

Admin at 04:48, 29 October 2023

2023-10-29T04:48:40Z

← Older revision		Revision as of 04:48, 29 October 2023
Line 140:		Line 140:
	defmodule AppWeb.ReceiveLive do		defmodule AppWeb.ReceiveLive do
	use AppWeb, :live_view		use AppWeb, :live_view

	def mount(_params, _session, socket) do		def mount(_params, _session, socket) do

	if connected?(socket) do		if connected?(socket) do
	Phoenix.PubSub.subscribe(App.PubSub, ~~topic~~)		Phoenix.PubSub.subscribe(App.PubSub, "message")
	end		end

	{:ok, assign(socket, message_item: "")}		{:ok, assign(socket, message_item: "")}
	end		end

	def handle_info({:~~text_stuff~~, text}, socket) do		def handle_info({:pubsub_transmission, text}, socket) do
	{:noreply, assign(socket, message_item: text)}		{:noreply, assign(socket, message_item: text)}
	end		end

	~~defp topic do # Topic~~		def render(assigns) do
	~~"message"~~		~H"""
	~~end~~		<div>
			<h1>ChatLive</h1>
	def render(assigns)do		<%= @message_item %>
	~H"""
	<div>
	<h1>ChatLive</h1>
	<%= @message_item %>
	</div>		</div>

	"""		"""
	end		end

	end		end


	</source>		</source>

Admin at 04:48, 29 October 2023

2023-10-29T04:48:16Z

← Older revision		Revision as of 04:48, 29 October 2023
Line 101:		Line 101:
	defmodule AppWeb.SendLive do		defmodule AppWeb.SendLive do
	use AppWeb, :live_view		use AppWeb, :live_view

	def mount(_params, _session, socket) do		def mount(_params, _session, socket) do
	{:ok, socket}		{:ok, socket}
	end		end

	def handle_event("send", %{"text" => text}, socket) do		def handle_event("send", %{"text" => text}, socket) do
	IO.inspect text		IO.inspect(text)

	Phoenix.PubSub.broadcast(App.PubSub, "message", {:~~text_stuff~~, text})		Phoenix.PubSub.broadcast(App.PubSub, "message", {:pubsub_transmission, text})

	{:noreply, socket}		{:noreply, socket}
	end		end

	defp topic do ~~#Topic~~		# Topic
			defp topic do
	"message"		"message"
	end		end

	def render(assigns)do		def render(assigns) do
	~H"""		~H"""
	<div>		<div>
	<h1>Send Message</h1>		<h1>Send Message</h1>
Line 127:		Line 128:
	</form>		</form>
	</div>		</div>

	"""		"""
	end		end
	end		end

	</source>		</source>

Admin at 00:31, 28 August 2023

2023-08-28T00:31:36Z

@@ Line 5: / Line 5: @@
 '''Prerequisites'''
-You should know how to launch a 1 page Live View app that lets the user submit data via a form. The form data prints to the page.
+You should know how to launch a 1 page Live View app that lets the user submit data via a form. The form data should print to the page.
@@ Line 18: / Line 14: @@
 This tutorial explains the basics of building a Phoenix PubSub chat app.
-The tutorial is divided into three parts, each part building on the completion of the previous one.
+The goal of this writing is to explain how to write code to build Phoenix PubSub applications. The tutorial is divided into three parts, each part building on the completion of the previous one.
 '''Project Description'''
@@ Line 194: / Line 190: @@
 For brevity I refer to these as '''broadcast''','''subscribe''' and '''handle_info'''.
-* '''broadcast'''
+All PubSub applications are composed of these three functions.
 ===A Useful Mental Model===
@@ Line 256: / Line 248: @@
 This function is used in GenServers. When used with a Live View it listens for payload data being sent via the '''broadcast''' method.