From 3b3f3e687a3b4c67162b675d97ed75c0304df147 Mon Sep 17 00:00:00 2001
From: Dan Barber <github@danbarber.me>
Date: Sun, 25 Feb 2018 15:07:45 -0500
Subject: [PATCH] Create a channel and connect the socket

---
 assets/js/components/chess-board.js    | 11 +++++++++++
 assets/js/socket.js                    | 10 ++--------
 lib/chess_web/channels/game_channel.ex |  9 +++++++++
 lib/chess_web/channels/user_socket.ex  |  2 +-
 test/support/channel_case.ex           |  1 -
 5 files changed, 23 insertions(+), 10 deletions(-)
 create mode 100644 lib/chess_web/channels/game_channel.ex

diff --git a/assets/js/components/chess-board.js b/assets/js/components/chess-board.js
index 9f8ddbb..2e3fa29 100644
--- a/assets/js/components/chess-board.js
+++ b/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() {
diff --git a/assets/js/socket.js b/assets/js/socket.js
index 0f8d461..dd26d25 100644
--- a/assets/js/socket.js
+++ b/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
diff --git a/lib/chess_web/channels/game_channel.ex b/lib/chess_web/channels/game_channel.ex
new file mode 100644
index 0000000..2cb8fa0
--- /dev/null
+++ b/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
diff --git a/lib/chess_web/channels/user_socket.ex b/lib/chess_web/channels/user_socket.ex
index a5b2ee6..a85d1ad 100644
--- a/lib/chess_web/channels/user_socket.ex
+++ b/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
diff --git a/test/support/channel_case.ex b/test/support/channel_case.ex
index b0da24b..9bac8da 100644
--- a/test/support/channel_case.ex
+++ b/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