Heroku is a free hosting. Let's deploy the application from this instruction: Emit and Broadcast JSON
You need to register on https://heroku.com/ and complete this official instruction: Getting Started on Heroku with Node.js
Go here: https://dashboard.heroku.com/apps and create a new application. For this you need to press "New" button in right top corner. Select "create new app". I created a new application with the name: red-game. In this case, my application will be available from this domain: https://red-game.herokuapp.com/ When you create your application at first time you will see this web page:
Quote
Heroku | Welcome to your new app!
Refer to the documentation if you need help deploying.
Go to your work folder using the console terminal. You need to have the file "app.js" and "client" folder in your work folder. Indeside "client" folder you need to have "index.html" from the instruction above. But we will change a few lines in "app.js". We will change a port number.
Replace this line of code:
var port = 8080;
On this line:
var port = process.env.PORT || 3000;
Note. If you do not want to read the previous instruction you can just copy-past this files and install packages using this commands:
Quote
npm init -y
npm install --save express socket.io shortid
app.js
var express = require("express"); var app = express(); var server = require("http").Server(app); app.get("/", function(req, res) { res.sendFile(__dirname + "/client/index.html"); }); app.use("/client", express.static(__dirname + "/client")); var port = process.env.PORT || 3000; server.listen(port); console.log("Server started. Port = " + port); var io = require("socket.io")(server, {}); var shortid = require('shortid'); io.sockets.on("connection", function(socket) { var clientName = shortid.generate(); console.log("client was connected, name = " + clientName); socket.on("getMyName", function() { socket.emit("onGetMyName", { name: clientName }); }); socket.on("sendMyNameToAllClients", function() { socket.broadcast.emit("onSendMyNameToAllClients", { name: clientName }); console.log(clientName); }); });
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js"></script> <title>Multiplayer Snake</title> </head> <body> <button onclick="getMyName();">Get My Name</button> <button onclick="sendMyNameToAllClients();">Send my Name to all Clients</button> <script> var socket = io(); socket.emit("hello", { message: "hello from client!" }); socket.on("onGetMyName", function(data) { console.log("My Name: " + data.name); }); socket.on("onSendMyNameToAllClients", function(data) { console.log("Name of another client: " + data.name); }); function getMyName() { socket.emit("getMyName"); } function sendMyNameToAllClients() { socket.emit("sendMyNameToAllClients"); } </script> </body> </html>
Add a new file: .gitignore (pay attention, "." is a part of the name)
The file ".gitignore" should have this content:
Quote
/node_modules/
Add the start script command in package.json here:
"scripts": { "start": "app.js", "test": "echo \"Error: no test specified\" && exit 1" },
Enter these commands in the command terminal. Pay attention: you need to write your application name instead of "red-game":
Quote
heroku login
git init
heroku git:remote -a red-game
Now we can to add new files, commit them and push/deploy our application on Heroku.
Enter these commands:
Quote
git commit -am "First commit"
git push heroku master
Go to your application in the browser. For example, in my case: https://red-game.herokuapp.com/ Open the browser console, for example in Chrome: "Ctrl+Shift+J". Click on buttons and you will see messages in the browser console. Open two tabs and press "Send my Name to all Clients" button. You will see a messages in the console in the second client tab.
P.S. You need to empty cache when you change your client side scripts of files: RMB on "Reload" button and select "Empty Cache and Hard Reload"
