Phoenix Clients with ES6
We’re going to start on the client, using ECMAScript 6[29] JavaScript features. We’ll build a bare-bones client to simply establish a connection. Over time, we’ll build up our client to add annotations and play them back.
Remember, each Phoenix conversation is on a topic, so we’ll need to be able to identify a topic. In our case, our topics will be videos. We’ll create a Video object. That client-side construct will connect to Phoenix directly.
Language features you’ve wished for years to land in JavaScript—string interpolation, a module system, destructuring assignment, and more—are now within reach. When you transpile a language, you’re translating it to a more common form. Since it’s possible to transpile ES6 to the widely available ES5 JavaScript, you can use ES6 today while supporting all mainstream browsers. This leaves you no reason to not go all-in on ES6. Plus, planned browser enhancements mean you have the bonus of waiting a couple years, and suddenly your ES6 code will be supported natively throughout the web.
Let’s create a separate file for our Video object in assets/js/video.js. It’s a long file, but it’s not too complicated, especially when broken into parts:
| 1: | import Player from "./player" |
| - | |
| - | let Video = { |
| - | |
| 5: | init(socket, element){ if(!element){ return } |
| - | let playerId = element.getAttribute("data-player-id") |
| - | let videoId = element.getAttribute("data-id") |
| - | socket.connect() |
| - | Player.init(element.id, playerId, () => { |
| 10: | this.onReady(videoId, socket) |
| - | }) |
| - | }, |
| - | |
| - | onReady(videoId, socket){ |
| 15: | let msgContainer = document.getElementById("msg-container") |
| - | let msgInput = document.getElementById("msg-input") |
| - | let postButton = document.getElementById("msg-submit") |
| - | let vidChannel = socket.channel("videos:" + videoId) |
| - | // TODO join the vidChannel |
| 20: | } |
| - | } |
| - | export default Video |
We first import our Player, the abstraction that lets us play videos and extract the exact time for any given frame so we can correctly place our annotations. Next, we define an init function to set up the player and pluck our video ID from the element attributes. We will then start the socket connection with socket.connect() and initialize our player while running a this.onReady() callback when the player has loaded. Within onReady, we define a handful of DOM variables for our Video player. We have the container for annotations, the input control, and the button for creating a new annotation. Pay special attention to vidChannel, which we’ll use to connect our ES6 client to our Phoenix VideoChannel. For now we just instantiate it, but we’ll join the conversation with the server in a moment.
Our topics need an identifier. By convention, ours takes the form "videos:" + videoId. In our application, this topic will let us easily send events to others interested in the same topic.
Let’s tweak our video player to use this new Video object.
We were previously initializing and importing our video player in assets/js/app.js, like this:
| | import Player from "./player" |
| | let video = document.getElementById("video") |
| | |
| | if(video) { |
| | Player.init(video.id, video.getAttribute("data-player-id"), () => { |
| | console.log("player ready!") |
| | }) |
| | } |
It would be better to tweak that code to compensate for the initialization we’re doing in video.js. Let’s tweak it to start only the Video object, like this:
| | import socket from "./socket" |
| | import Video from "./video" |
| | |
| | Video.init(socket, document.getElementById("video")) |
We import the Video object that we just created from its local module path. Next, we initialize the video with our connection called socket (more on this later) and the DOM element whose ID is video. Now load up your last video, and you should see it loaded into a YouTube player as before—but if you view your browser’s JavaScript console, you see that the channel join is failing:
| | Unable to join > {reason: "unmatched topic"} |
With our video up and running and vidChannel initialized, our client is trying to join a video channel that we haven’t implemented yet. Let’s flip back to the server side for a bit and fix this. It’s time to create a channel and establish the conversation with our client.