Configure web socket connection to Phoenix channel

Author: slashdotdash

lib/phoenix_react_redux_example/endpoint.ex

@@ -1,7 +1,7 @@
 defmodule PhoenixReactReduxExample.Endpoint do
   use Phoenix.Endpoint, otp_app: :phoenix_react_redux_example
 
-  socket "/socket", PhoenixReactReduxExample.UserSocket
+  socket "/ws", PhoenixReactReduxExample.UserSocket
 
   # Serve at "/" the static files from "priv/static" directory.
   #

package.json

@@ -31,6 +31,7 @@
     "babel-loader": "^6.0.1",
     "babel-preset-es2015": "^6.1.2",
     "babel-preset-react": "^6.1.2",
+    "copy-webpack-plugin": "^0.2.0",
     "css-loader": "^0.22.0",
     "extract-text-webpack-plugin": "^0.9.1",
     "node-libs-browser": "^0.5.3",

web/static/js/actions.js

@@ -38,7 +38,10 @@ function addTodoFailure(text) {
 export function addTodo(text) {
   return dispatch => {
     dispatch(addTodoRequest(text));
+
+    // add todo, then dispatch success/failure
     dispatch(addTodoSuccess(text));
+    dispatch(addTodoFailure(text));
   };
 }
 

web/static/js/channel.js

@@ -0,0 +1,15 @@
+import { Socket } from 'phoenix';
+
+export function configureChannel() {
+  let socket = new Socket('/ws');
+  socket.connect();
+
+  let channel = socket.channel('todos');
+  
+  channel.on('new:todo', msg => console.log('new:todo', msg));
+
+  channel.join()
+    .receive('ok', messages => console.log('catching up', messages))
+    .receive('error', reason => console.log('failed join', reason))
+    .after(10000, () => console.log('Networking issue. Still waiting...'));
+}

web/static/js/index.js

@@ -6,6 +6,7 @@ import { createStore, applyMiddleware } from 'redux';
 import { Provider } from 'react-redux';
 import App from './containers/App';
 import todoApp from './reducers';
+import { configureChannel } from './channel';
 
 const loggerMiddleware = createLogger();
 
@@ -16,6 +17,8 @@ const createStoreWithMiddleware = applyMiddleware(
 
 const store = createStoreWithMiddleware(todoApp);
 
+configureChannel(store);
+
 render(
   <Provider store={store}>
     <App />

webpack.config.js

@@ -1,11 +1,19 @@
 var webpack = require('webpack');
 var path = require('path');
 var ExtractTextPlugin = require('extract-text-webpack-plugin');
+var CopyWebpackPlugin = require('copy-webpack-plugin');
 
 var env = process.env.MIX_ENV || 'dev';
 var isProduction = (env === 'prod');
 
-var plugins = [new ExtractTextPlugin('app.css')];
+var plugins = [
+  new ExtractTextPlugin('app.css'),
+  new CopyWebpackPlugin([
+      { from: './web/static/assets' },
+      { from: './deps/phoenix_html/web/static/js/phoenix_html.js',
+        to: 'js/phoenix_html.js' }
+    ])
+];
 
 // This is necessary to get the sass @import's working
 var stylePathResolves = (
@@ -19,10 +27,18 @@ if (isProduction) {
 
 module.exports = {
   entry: './web/static/js/index.js',
+
   output: {
     path: './priv/static/js',
     filename: 'app.js'
   },
+
+  resolve: {
+    alias: {
+      phoenix: __dirname + '/deps/phoenix/web/static/js/phoenix.js'
+    }
+  },
+
   module: {
         loaders: [
             {
@@ -43,5 +59,6 @@ module.exports = {
 
         ]
   },
+
   plugins: plugins
 };