Added WebSockets example

borisd · borisd · commit 50af05711a92 · 2016-12-20T11:37:02.000+02:00
diff --git a/5.websockets/app.js b/5.websockets/app.js
@@ -0,0 +1,30 @@
+const wsConnected = () => ({
+  type: 'WS_CONNECTED'
+});
+
+const wsDisconnected = () => ({
+  type: 'WS_DISCONNECTED'
+});
+
+const chatMessage = (text, global = true) => ({
+  type: 'CHAT_MESSAGE',
+  payload: text,
+  meta: {
+    websocket: global
+  }
+});
+
+const rootReducer = (state = [], action) => {
+  switch (action.type) {
+    case 'CHAT_MESSAGE':
+      return state.concat({ text: action.payload, meta: action.meta })
+  }
+  return state;
+};
+
+const store = Redux.createStore(
+  rootReducer,
+  Redux.applyMiddleware(logMiddleware, wsMiddleware)
+);
+
+$(loadUI);
diff --git a/5.websockets/index.html b/5.websockets/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Chapter 5. Websockets with Redux</title>
+</head>
+<body>
+  <div id="app"></div>
+
+  <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.3.1/redux.min.js"></script>
+  <script src="middleware.js"></script>
+  <script src="ui.js"></script>
+  <script src="app.js"></script>
+</body>
+</html>
diff --git a/5.websockets/middleware.js b/5.websockets/middleware.js
@@ -0,0 +1,58 @@
+const WS_ROOT = "ws://echo.websocket.org/";
+
+const SOCKET_STATES = {
+  CONNECTING: 0,
+  OPEN: 1,
+  CLOSING: 2,
+  CLOSED: 3
+};
+
+const wsMiddleware = ({ dispatch }) => next => {
+
+  const websocket = new WebSocket(WS_ROOT);
+
+  Object.assign(websocket, {
+    onopen() {
+      active = true;
+      dispatch(wsConnected())
+    },
+
+    onclose() {
+      active = false;
+      dispatch(wsDisconnected())
+    },
+
+    onerror(error) {
+      console.log(`WS Error: ${ error.data }`);
+    },
+
+    onmessage(event) {
+      const message = JSON.parse(event.data)
+
+      Object.assign(message, { meta: { fromWebsocket: true }});
+
+      dispatch(message);
+    }
+  });
+
+  return action => {
+    if (websocket.readyState === SOCKET_STATES.OPEN &&
+      action.meta &&
+      action.meta.websocket) {
+
+      // Remove action metadata before sending
+      const cleanAction = Object.assign({}, action, {
+        meta: undefined
+      });
+      websocket.send(JSON.stringify(cleanAction));
+    }
+
+    next(action);
+  };
+};
+
+const logMiddleware = ({ getState, dispatch }) => (next) => (action) => {
+  console.log(`Action: ${ action.type }`, action);
+
+  next(action);
+};
diff --git a/5.websockets/ui.js b/5.websockets/ui.js
@@ -0,0 +1,40 @@
+const renderMessage = message => `<li>${ message.text } <i>${ JSON.stringify(message.meta) }</i></li>`;
+
+const updateUI = () => {
+  const messages = store.getState();
+
+  $('.messages > ul').html(messages.map(renderMessage));
+};
+
+const handleAdd = () => {
+  const $message = $('.messages > input[type=text]');
+  const $global  = $('.messages > input[type=checkbox]');
+
+  store.dispatch(
+    chatMessage(
+      $message.val(),
+      $global.is(':checked')
+    ));
+
+  $message.val('');
+};
+
+const loadUI = () => {
+  $('#app').append(`
+    <div class="messages">
+      <h2>Websocket messages:</h2>
+      <ul></ul>
+      <input type="checkbox" checked />
+      <label for="">Send to server</label>
+      <br/>
+      <input type="text" />
+      <button>Send</button>
+    </div>
+  `);
+
+  store.subscribe(updateUI);
+
+  $(document).on('click', '.messages > button', handleAdd);
+
+  updateUI();
+};
diff --git a/chapter5/.gitkeep b/chapter5/.gitkeep
