Building a collaborative painting canvas with Phoenix
summary
Shows building a real time collaborative painting canvas using Elixir on the BEAM, Phoenix for websockets and channels, and an HTML <canvas> frontend; demo sends captured XY strokes as JSON lines to a Phoenix channel and the server uses broadcast_from avoids echo to relay strokes to all other browsers in milliseconds. Demonstrates spawning 10 processes that finish in ~1s and Task.async_stream with max_concurrency 5 taking ~2s, and the canvas demo works live across multiple browsers.
AI-written summary · about
chapters (34)
- 0:00Intro
- 0:25Reddit 1000 Pixel Canvas
- 1:43Introduction to Elixir
- 2:51Demo
- 6:10Elixir
- 11:18Erlang
- 13:21SyncStream
- 17:21Mailbox
- 18:24Message
- 20:06About Phoenix
- 21:54Mix
- 22:53Mix Structure
- 24:18Mix Packages
- 24:37Creating a Phoenix App
- 25:15Phoenix App Overview
- 26:20Auto Reload
- 29:24SocketD
- 29:50Router
- 30:33HTML
- 31:06Load Phoenix HTML
- 32:04Create WebSocket
- 35:26Print Ping
- 37:01Handle
- 37:36Push
- 38:06pong
- 38:39websocket messages
- 40:07WebSocket connection
- 41:50Stats HTML
- 42:05Java Script
- 43:23Broadcast stats
- 44:02URL
- 44:17Every Request
- 44:58Canvas
- 46:12Canvas Lines
related talks
46mBuilding a Realtime Websocket API in Phoenix
37mMultiplayer games and (...) with LiveView
50mCollaborative Music with Elm and Phoenix
01h 00mPhoenix: an Intro to Elixir's Web Framework
44mElixir & Phoenix - Fast, Concurrent and Explicit
50mPhoenix Framework: a (Truly) Fullstack Stack for Building Real-Time Web
45mPhoenix a web framework for the new web
45mElixir: une potion pour mixer complexité et concurrence en temps réel