Looking to create a simple function in Phoenix

Seems like a very specific problem statement!

I think you’d be well served using Phoenix Channels along with your Endpoint’s broadcast/3 function.

Hi!

I was wondering if you maybe give me some more steps to follow? I am pretty new to this and would like to understand on how I would get this rolling!

Channels seems a good solution for your requirements, I’d suggest you to make a fresh new project in order to learn about them, in isolation. (you dont need a db / ecto for that.)
@axelson linked the guide, which is the must-read starting point and contains a very clear tutorial. With it I’d say you’re half way through Enjoy the challenge!

I ended up setting up a simple channel chat room following the guide but I am stuck on if I create a broadcast (message) function in my test.ex, how would i connect this function to my channel to display message on my browser window?

Does this help https://www.youtube.com/watch?v=KAqUy3nsXfg?

Also this elixirgirls.com — Domain For Sale for $2,788 | Unstoppable Domains

This video seems to be going over the working chat I have already created. So how would I send a message from my server and make it display on my browser window?

Usually You would use the endpoint to broadcast anywhere from Phoenix…

But in your case, You might as well create a channel, and use Phoenix pubsub directly.

What I usually do is create a notifier module, like this…

defmodule KokoWeb.Notifier do
  require Logger
  alias KokoWeb.Endpoint

  def notify(%{payload: %{id: id, user_id: user_id}, type: :game_left}) do
    Endpoint.broadcast!("world:#{id}", "world_left", %{id: user_id})
  end

  def notify(%{payload: %{from: from, to: to}, type: :ping}) do
    Endpoint.broadcast!("user:#{to}", "ping", %{from: from})
  end

  def notify(message) do
    Logger.debug(fn -> "Unknown notification #{inspect(message)}" end)
  end
end

I can use this module from my server.

Here is my socket.js file in my phoenix app

import { Socket } from "phoenix"

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


socket.connect()


let channel = socket.channel("room:lobby", {})
let chatInput = document.querySelector("#chat-input")
let messagesContainer = document.querySelector("#messages")


chatInput.addEventListener("keypress", event => {
    if (event.keyCode === 13) {
        channel.push("new_msg", { body: chatInput.value })
        chatInput.value = ""
    }
})


channel.on("new_msg", payload => {
    let messageItem = document.createElement("li")
    messageItem.innerText = `[${Date()}] ${payload.body}`
    messagesContainer.appendChild(messageItem)
})


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

export default socket

This is Room Channel handling the topics

defmodule TestWeb.RoomChannel do
  use Phoenix.Channel

  def join(_name, _message, socket) do
    {:ok, %{hey: "there"}, socket}
  end

  def handle_in("new_msg", %{"body" => body}, socket) do
    broadcast!(socket, "new_msg", %{body: body})
    {:noreply, socket}
  end
end

Right now I can open up multiple pages and chat message and it will show on both browsers. What I want to be able to do is make the function shown in the code below to be able to display that message in my channel:

defmodule Test do
  
  #How could I connect this broadcast function to display this 
  #string message into my chat room

  def broadcast(message) do
    IO.puts(message)
  end
end

Probably like this… (with the correct alias to your Endpoint)

def broadcast(message) do
  Endpoint.broadcast!("room:lobby", "new_msg", %{body: message})
end

The first parameter is the topic, then the message type, then the payload. This correspond to…

let channel = socket.channel("room:lobby", {})
...
channel.on("new_msg", payload => {
    let messageItem = document.createElement("li")
    messageItem.innerText = `[${Date()}] ${payload.body}`
    messagesContainer.appendChild(messageItem)
})

This makes so much more sense, I feel like I was missing a simple step! I do have on error tho, how can I check my correct Alias because when I do call my function Test.broadcast in the iex I am getting this error:

Interactive Elixir (1.9.4) - press Ctrl+C to exit (type h() ENTER for help)
iex(1)> Test
Test
iex(2)> Test.broadcast("hello")
** (UndefinedFunctionError) function Test.broadcast/1 is undefined (module Test is not available)
    Test.broadcast("hello")
iex(2)>