Simple P2P with WebRTC

shama · shama · commit 33f3d0355e62 · 2018-04-03T23:12:18.000-07:00
diff --git a/simple-p2p-with-webrtc/README.md b/simple-p2p-with-webrtc/README.md
@@ -0,0 +1,10 @@
+# Simple P2P with WebRTC
+
+> [https://youtu.be/jY9k4rfXwEI](https://youtu.be/jY9k4rfXwEI)
+
+Install [Node.js](https://nodejs.org/).
+
+Within this folder run the terminal command `npm install` to install the
+`dependencies` and `devDependencies`.
+
+Then run `npm start` to run the app viewable on `http://localhost:9966`.
diff --git a/simple-p2p-with-webrtc/index.js b/simple-p2p-with-webrtc/index.js
@@ -0,0 +1,43 @@
+const signalhub = require('signalhub')
+const hub = signalhub('my-game', [
+  'http://localhost:8080'
+])
+
+const Player = require('./player.js')
+const you = new Player()
+
+const players = {}
+hub.subscribe('update').on('data', function (data) {
+  if (data.color === you.color) return
+  if (!players[data.color]) {
+    players[data.color] = new Player(data)
+  }
+  players[data.color].update(data)
+  //console.log(data)
+})
+
+setInterval(function () {
+  //hub.broadcast('update', window.location.hash)
+  you.update()
+  hub.broadcast('update', you)
+}, 100)
+
+document.addEventListener('keypress', function (e) {
+  const speed = 16
+  switch (e.key) {
+    case 'a':
+      you.x -= speed
+      break
+    case 'd':
+      you.x += speed
+      break
+    case 'w':
+      you.y -= speed
+      break
+    case 's':
+      you.y += speed
+      break
+  }
+}, false)
+
+
diff --git a/simple-p2p-with-webrtc/package.json b/simple-p2p-with-webrtc/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "simple-p2p-with-webrtc",
+  "version": "0.1.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "start": "budo index.js",
+    "signalhub": "signalhub listen -p 8080"
+  },
+  "author": "Kyle Robinson Young <kyle@dontkry.com> (http://dontkry.com)",
+  "license": "MIT",
+  "devDependencies": {
+    "budo": "^11.2.0"
+  },
+  "dependencies": {
+    "signalhub": "^4.9.0"
+  }
+}
diff --git a/simple-p2p-with-webrtc/player.js b/simple-p2p-with-webrtc/player.js
@@ -0,0 +1,32 @@
+module.exports = Player
+
+function Player (data) {
+  data = data || {}
+  this.color = data.color || randomColor()
+  this.x = 0
+  this.y = 0
+  this.element = document.createElement('div')
+  Object.assign(this.element.style, {
+    width: '16px',
+    height: '16px',
+    position: 'absolute',
+    top: '0px',
+    left: '0px',
+    backgroundColor: this.color
+  })
+  document.body.appendChild(this.element)
+}
+
+Player.prototype.update = function (data) {
+  data = data || {}
+  this.x = data.x || this.x
+  this.y = data.y || this.y
+  Object.assign(this.element.style, {
+    top: this.y + 'px',
+    left: this.x + 'px'
+  })
+}
+
+function randomColor () {
+  return '#' + ((1 << 24) * Math.random() | 0).toString()
+}
