WebSocket Chat

Last updated 6 months ago

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/channel/chat_room_channel.cr
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/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: "Hello Amber from WebSocket Client!"
});
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.