Browse documentation

Read this page as HTML, Markdown, or structured JSON—or open the published Markdown with an AI assistant. Gemini receives the prompt through your clipboard because its signed-out page does not reliably prefill URL text; paste when the new tab opens. External assistants need the public site URL.

WebSocket Chat

This recipe will help you to setup a basic WebSocket chat in your application.

First you need an amber project generated with Amber CLI or from scratch.

src/channels/chat_room_channel.cr
Crystal
class ChatRoomChannel < Amber::Websockets::Channel
  def handle_message(client_socket, msg)
    rebroadcast!(msg)
  end
end

Then setup your socket file:

src/sockets/chat_socket.cr

struct ChatSocket < Amber::WebSockets::ClientSocket
  channel "chat_room:*", ChatRoomChannel
def on_connect
# returning true accept all connections
# you can use authentication here
true
end
end

Then add the websocket verb in your routes file:

config/routes.cr

Amber::Server.configure do |app| pipeline :web do # pipelines... end

routes :web do # other routes,,, websocket "/chat", ChatSocket end end

Finally you will require an Amber JavaScript Client to connect with your server:

You can get amber.min.js from lib/amber/assets/js/amber.min.js

public/index.html

<script src="/public/amber.min.js"></script>
<script>
let socket = new Amber.Socket('/chat');
socket.connect().then(function() {
let channel = socket.channel('chat_room:hello');
channel.join();

channel.push('message_new', {
  message: &quot;Hello Amber from WebSocket Client!&quot;
});

channel.on('message_new', function(payload) {
  console.log(payload);
});

}); </script>

To serve static files you must enable :static routes, please see pipelines.

Also see more detailed information about this in WebSockets.