Basic Socket Server

.babelrc

@@ -0,0 +1,27 @@
+{
+  "presets": [
+    [
+      "env",
+      {
+        "targets": {
+          "node": "current",
+          "browsers": "last 2 versions"
+        }
+      }
+    ],
+    "stage-0",
+    "es2015",
+    "es2016",
+    "es2017",
+    "react"
+  ],
+  "plugins": [
+    [
+      "babel-root-import",
+      {
+        "rootPathSuffix": "backend"
+      }
+    ],
+    "transform-class-properties"
+  ]
+}

.eslintrc

@@ -0,0 +1,9 @@
+{
+  "extends": "airbnb",
+  "rules": {},
+  "settings": {
+    "import/resolver": {
+      "babel-plugin-root-import": {}
+    }
+  }
+}

.gitignore

@@ -0,0 +1,15 @@
+# Node.
+npm-debug.log
+coverage/
+node_modules/
+
+# env
+.env
+
+# Public (distribution).
+public/*bundle.js
+
+# Config files.
+config/*
+!config/default.js
+!config/test.js

client/components/AppRoot.js

@@ -0,0 +1,55 @@
+import React, { Component } from "react";
+import io from "socket.io-client";
+
+// random color helper
+function selectColor(colorNum, colors) {
+  if (colors < 1) colors = 1;
+  return "hsl(" + ((colorNum * (360 / colors)) % 360) + ",100%,50%)";
+}
+
+export default class AppRoot extends Component {
+  state = {
+    client: null,
+    myData: []
+  };
+  componentDidMount() {
+    this.socket = io.connect("http://localhost:3334");
+    this.socket.on("connect", () => {
+      this.setState({ client: this.socket });
+    });
+
+    this.socket.on("TIMEREVENT", data => {
+      this.setState(prevState => ({
+        myData: [...prevState.myData, data]
+      }));
+    });
+  }
+
+  renderSocketServerData = () => {
+    const { myData } = this.state;
+    if (myData.length) {
+      return myData.map((item, i) => {
+        return (
+          <li
+            key={i}
+            style={{
+              color: `${selectColor(12, item)}`
+            }}
+          >
+            Data received from socketserver ---> {item}
+          </li>
+        );
+      });
+    }
+  };
+  render() {
+    return (
+      <div>
+        <h1>Socket.Io</h1>
+        <h2>My Socket Id is:</h2>
+        <p>{this.state.client ? this.state.client.id : "Not Connected Yet"}</p>
+        <ul>{this.renderSocketServerData()}</ul>
+      </div>
+    );
+  }
+}

client/index.js

@@ -0,0 +1,9 @@
+import React from "react";
+import { render } from "react-dom";
+import AppRoot from "./components/AppRoot";
+
+function main() {
+  render(<AppRoot />, document.querySelector("#root"));
+}
+
+document.addEventListener("DOMContentLoaded", main);