WebSocket Chat

Last updated 8 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.
JSON Mapping
Troubleshooting