08-item-web-socket

README.md

@@ -114,7 +114,7 @@ Branches
 	  - index.js
 	  - App.js - component showing ItemList
 	  - ItemList.js - component with an inner template ItemListTemplate producing an html fragment
-	  - ItemService.js, ItemWsClient.js, ItemRestClient.js
+	  - itemService.js, ItemWsClient.js, ItemRestClient.js
   - App and ItemList defined as components having a simple onInit - onDestroy lifecycle
   - ItemList shows a loading text before items are fetched
   - discuss component state changes
@@ -127,7 +127,7 @@ Branches
 	  - index.js
 	  - App.js - component showing ItemEdit and ItemList
 	  - ItemList.js, ItemEdit.js
-	  - ItemService.js, ItemWsClient.js, ItemRestClient.js
+	  - itemService.js, ItemWsClient.js, ItemRestClient.js
   - create and update items handled by ItemEdit; delete item handled by ItemList
   - discuss event handling
 
@@ -138,7 +138,7 @@ Branches
 	  - index.js
 	  - App.js - component showing ItemEdit and ItemList
 	  - ItemList.js, ItemEdit.js
-	  - ItemService.js, ItemWsClient.js, ItemRestClient.js
+	  - itemService.js, ItemWsClient.js, ItemRestClient.js
   - add a render method to components lifecycle
   - discuss component properties and state
 
@@ -149,7 +149,7 @@ Branches
 	  - index.js
 	  - App.js - component showing ItemEdit and ItemList
 	  - ItemList.js, ItemEdit.js
-	  - Store.js, Provider.js, ItemService.js, ItemWsClient.js, ItemRestClient.js
+	  - Store.js, Provider.js, itemService.js, ItemWsClient.js, ItemRestClient.js
   - implement a simple redux Store
   - refactor ItemService in terms of actions and reducers
   - write a simple Provider and provide the store to the entire App

package.json

@@ -13,7 +13,8 @@
     "koa": "^2.5.2",
     "koa-bodyparser": "^4.2.1",
     "koa-router": "^7.4.0",
-    "node-fetch": "^2.1.2"
+    "node-fetch": "^2.1.2",
+    "ws": "^5.2.2"
   },
   "devDependencies": {
     "babel-plugin-transform-object-rest-spread": "^6.26.0",

src/client/index.js

@@ -1,4 +1,4 @@
-import { ItemRestClient } from './ItemRestClient';
+import itemService from './itemService';
 import itemCli from './itemCli';
 
-itemCli(new ItemRestClient());
+itemCli();

src/client/itemCli.js

@@ -1,5 +1,6 @@
 import readline from 'readline';
 import Item from '../shared/Item';
+import { createItem, getItems, removeItem, subscribe } from './itemService';
 
 const cli = (() => {
   const commandMap = {};
@@ -36,19 +37,20 @@ const cli = (() => {
   }
 })();
 
-const itemCli = itemRestClient => {
+const itemCli = () => {
+  subscribe(items => console.log('items updated', items));
   cli.command('show', 'Show items', async () => {
-    console.log(await itemRestClient.search({}));
+    console.log(await getItems({}));
   });
   cli.command('add', 'Add item', async (args) => {
     try {
-      console.log(await itemRestClient.create(new Item(args, true)));
+      await createItem(new Item(args, true));
     } catch(error) {
       console.log(error.issues);
     }
   });
   cli.command('remove', 'Remove item by id', async (args) => {
-    console.log(await itemRestClient.remove(parseInt(args)));
+    await removeItem(parseInt(args));
   });
   cli.setErrorHandler(error => console.log(error));
   cli.start();

src/client/itemService.js

@@ -0,0 +1,55 @@
+import { ItemRestClient } from './ItemRestClient';
+
+let cachedItems = null;
+
+const subscribers = [];
+
+export const subscribe = listener => subscribers.push(listener);
+
+const itemRestClient = new ItemRestClient();
+
+export const createItem = async (item) => {
+  const createdItem = await itemRestClient.create(item);
+  onCreatedItem(item);
+};
+
+export const onCreatedItem = item => {
+  const index = cachedItems.findIndex(item => createdItem.id === item.id);
+  if (index === -1) {
+    cachedItems.push(createdItem);
+    notifyUpdates();
+  }
+};
+
+export const getItems = async () => {
+  if (cachedItems) {
+    return cachedItems;
+  }
+  cachedItems = await itemRestClient.search({});
+  notifyUpdates();
+};
+
+const notifyUpdates = () => subscribers.forEach(listener => listener(cachedItems));
+
+export const removeItem = async (id) => {
+  await itemRestClient.remove(id);
+  onRemovedItem({ id });
+};
+
+export const onRemovedItem = ({ id }) => {
+  const index = cachedItems.findIndex(item => id === item.id);
+  if (index !== -1) {
+    cachedItems.splice(index, 1);
+  }
+  notifyUpdates();
+};
+
+export const onUpdatedItem = item => {
+  const index = cachedItems.findIndex(it => item.id === it.id);
+  if (index !== -1) {
+    cachedItems.splice(index, 1, item);
+  } else {
+    cachedItems.push(item);
+  }
+  notifyUpdates();
+};

src/client/itemWsClient.js

@@ -0,0 +1,11 @@
+import itemService from './itemService';
+
+const ws = new WebSocket('ws://localhost:3000/');
+
+ws.on('open', function open() {
+  ws.send('something');
+});
+
+ws.on('message', function incoming(data) {
+  console.log(data);
+});

src/index.js

@@ -1,5 +1,5 @@
 require("regenerator-runtime/runtime");
 require('./re-intro');
 
-require('./client');
 require('./server');
+require('./client');

src/server/index.js

@@ -1,9 +1,13 @@
+import http from 'http';
 import Koa from 'koa';
 import Router from 'koa-router';
 import bodyParser from 'koa-bodyparser';
 import itemRouter from './itemRouter';
+import { initWss } from './itemWss';
 
 const app = new Koa();
+const server = http.createServer(app.callback());
+initWss(server);
 
 const exceptionHandler = async (ctx, next) => {
   try {
@@ -39,4 +43,4 @@ app
   .use(apiRouter.allowedMethods());
 
 console.log('server - listening on port', 3000);
-app.listen(3000);
+server.listen(3000);

src/server/itemRouter.js

@@ -1,5 +1,6 @@
 import Router from 'koa-router';
 import { ItemStore } from './ItemStore';
+import { notifyClients } from './itemWss';
 
 const itemStore = new ItemStore();
 
@@ -23,8 +24,10 @@ router.get('/:id', async (ctx) => { // read
 });
 
 router.post('/', async (ctx) => { // create
-  ctx.response.body = await itemStore.insert(ctx.request.body);
+  const item = await itemStore.insert(ctx.request.body);
+  ctx.response.body = item;
   ctx.response.status = 201; // created
+  notifyClients({ event: 'item/added', data: item });
 });
 
 router.put('/:id', async (ctx) => { // update
@@ -40,6 +43,7 @@ router.put('/:id', async (ctx) => { // update
   if (updatedCount === 1) {
     response.body = item;
     response.status = 200; // ok
+    notifyClients({ event: 'item/updated', data: item });
   } else {
     response.body = { issues: [{ severity: 'error', description: 'Resource no longer exists' }] };
     response.status = 405; // method not allowed
@@ -51,6 +55,7 @@ router.del('/:id', async (ctx) => { // delete
   const count = await itemStore.remove({ id });
   ctx.response.body = {};
   ctx.response.status = 204; // no content
+  notifyClients({ event: 'item/deleted', data: { id } });
 });
 
 export default router;

src/server/itemWss.js

@@ -0,0 +1,23 @@
+import WebSocket from 'ws';
+
+let wss = null;
+
+export const initWss = (server) => {
+  wss = new WebSocket.Server({ server });
+  wss.on('connection', (ws, request) => {
+    console.log('server - wss on connection');
+    ws.on('message', (message) => {
+      console.log('server - wss received: %s', message);
+      ws.send('echo' + message);
+    });
+  });
+};
+
+export const notifyClients = message => {
+  if (!wss) {
+    return;
+  }
+  wss.clients.forEach(ws => {
+    ws.send(JSON.stringify(message));
+  })
+};