Built with the Phoenix Framework
To start your new Phoenix application you have to:
- Install dependencies with
mix deps.get - Start Phoenix router with
mix phoenix.server
Now you can visit localhost:4000 from your browser.
http:https://phoenixchat.herokuapp.com
$(function(){
var socket = new Phoenix.Socket("ws:https://" + location.host + "/ws");
var $status = $("#status");
var $messages = $("#messages");
var $input = $("#message-input");
var $username = $("#username");
var sanitize = function(html){ return $("<div/>").text(html).html(); }
var messageTemplate = function(message){
var username = sanitize(message.username || "anonymous");
var body = sanitize(message.body);
return("<p><a href='#'>[" + username + "]</a> " + body +"</p>");
}
socket.join("rooms", "lobby", {}, function(chan){
$input.off("keypress").on("keypress", function(e) {
if (e.keyCode == 13) {
chan.send("new:message", {username: $username.val(), body: $input.val()});
$input.val("");
}
});
chan.on("join", function(message){
$status.text("joined");
});
chan.on("new:message", function(message){
$messages.append(messageTemplate(message));
scrollTo(0, document.body.scrollHeight);
});
chan.on("user:entered", function(msg){
var username = sanitize(msg.username || "anonymous");
$messages.append("<br/><i>[" + username + " entered]</i>");
});
});
});defmodule Chat.Router do
use Phoenix.Router
use Phoenix.Router.Socket, mount: "/ws"
plug Plug.Static, at: "/static", from: :chat
get "/", Chat.Controllers.Pages, :index, as: :page
channel "rooms", Chat.RoomChannel
enddefmodule Chat.RoomChannel do
use Phoenix.Channel
def join(socket, topic, %{"username" => username}) do
IO.puts "JOIN #{socket.channel}:#{topic}"
reply socket, "join", status: "connected"
broadcast socket, "user:entered", %{username: username}
{:ok, socket}
end
def event(socket, "new:message", message) do
broadcast socket, "new:message", message
socket
end
end