Create a channel and connect the socket

assets/js/components/chess-board.js

@@ -6,6 +6,8 @@ import { setGame, setGameId } from "../store/actions";
 
 import ChessBoardSquare from "./chess-board-square";
 
+import socket from "../socket";
+
 class ChessBoard extends React.Component {
   componentWillMount() {
     const { gameId, store } = this.props;
@@ -16,6 +18,15 @@ class ChessBoard extends React.Component {
       .then((data) => {
         store.dispatch(setGame(data));
       });
+
+    this.channel = socket.channel("game:" + gameId, {})
+    this.channel.join()
+      .receive("ok", resp => { console.log("Joined successfully", resp) })
+      .receive("error", resp => { console.log("Unable to join", resp) })
+
+    this.channel.on("game_update", data => {
+      store.dispatch(setGame(data));
+    })
   }
 
   getBoard() {

assets/js/socket.js

@@ -3,9 +3,9 @@
 
 // To use Phoenix channels, the first step is to import Socket
 // and connect at the socket path in "lib/my_app/endpoint.ex":
-import {Socket} from "phoenix"
+import { Socket } from "phoenix"
 
-let socket = new Socket("/socket", {params: {token: window.userToken}})
+let socket = new Socket("/socket", { params: { token: window.userToken } })
 
 // When you connect, you'll often need to authenticate the client.
 // For example, imagine you have an authentication plug, `MyAuth`,
@@ -53,10 +53,4 @@ let socket = new Socket("/socket", {params: {token: window.userToken}})
 
 socket.connect()
 
-// Now that you are connected, you can join channels with a topic:
-let channel = socket.channel("topic:subtopic", {})
-channel.join()
-  .receive("ok", resp => { console.log("Joined successfully", resp) })
-  .receive("error", resp => { console.log("Unable to join", resp) })
-
 export default socket

lib/chess_web/channels/game_channel.ex

@@ -0,0 +1,9 @@
+defmodule ChessWeb.GameChannel do
+  @moduledoc false
+
+  use Phoenix.Channel
+
+  def join("game:" <> game_id, _params, socket) do
+    {:ok, socket}
+  end
+end

lib/chess_web/channels/user_socket.ex

@@ -2,7 +2,7 @@ defmodule ChessWeb.UserSocket do
   use Phoenix.Socket
 
   ## Channels
-  # channel "room:*", Chess.RoomChannel
+  channel "game:*", ChessWeb.GameChannel
 
   ## Transports
   transport :websocket, Phoenix.Transports.WebSocket

test/support/channel_case.ex

@@ -25,7 +25,6 @@ defmodule ChessWeb.ChannelCase do
       import Ecto.Changeset
       import Ecto.Query
 
-
       # The default endpoint for testing
       @endpoint ChessWeb.Endpoint
     end