{"id":26871201,"url":"https://github.com/codeadamca/nodejs-socket","last_synced_at":"2025-08-11T21:42:16.641Z","repository":{"id":115328406,"uuid":"294862261","full_name":"codeadamca/nodejs-socket","owner":"codeadamca","description":"Using Socket.io to communicate between a browser and a Node.js app.","archived":false,"fork":false,"pushed_at":"2025-01-26T22:15:57.000Z","size":27,"stargazers_count":3,"open_issues_count":0,"forks_count":5,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-31T07:18:41.372Z","etag":null,"topics":["javascript","nodejs","socket"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/codeadamca.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-09-12T03:28:56.000Z","updated_at":"2025-01-26T22:16:00.000Z","dependencies_parsed_at":null,"dependency_job_id":"dce90c45-c496-4c24-b010-0177b8684fb2","html_url":"https://github.com/codeadamca/nodejs-socket","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codeadamca%2Fnodejs-socket","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codeadamca%2Fnodejs-socket/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codeadamca%2Fnodejs-socket/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codeadamca%2Fnodejs-socket/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codeadamca","download_url":"https://codeload.github.com/codeadamca/nodejs-socket/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252826494,"owners_count":21810121,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","nodejs","socket"],"created_at":"2025-03-31T07:18:45.406Z","updated_at":"2025-05-07T06:29:21.958Z","avatar_url":"https://github.com/codeadamca.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# A Sample Interaction using Node.js and Socket\n\nThis tutorial will walk you through the creation of a simple Node.js and Socket.io example. It includes sending a message from an HTML page to a Node.js server and a message from a Node.js server to an HTML page. \n\n## Steps\n\n1. Create an HTML file with the basic required HTML tags:\n\n    ```html\n    \u003c!doctype html\u003e\n    \u003chtml\u003e\n      \u003chead\u003e\n        \n        \u003ctitle\u003eNode.js and Socket.io\u003c/title\u003e\n    \n      \u003c/head\u003e\n      \u003cbody\u003e \n           \n      \u003c/body\u003e\n    \u003c/html\u003e\n    ```\n\n2. Include the Socket.io CDN in the `head` section:\n\n    ```html\n    \u003cscript src='https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.4/socket.io.js'\u003e\u003c/script\u003e\n    ```\n\n3. Add a button to the `body` section:\n\n    ```html\n    \u003cbutton id=\"fromClient\"\u003eFrom Client\u003c/button\u003e\n    ```\n\n4. Before the close `body` tag add JavaScript that will initialize Socket.io, receive a Socket.io message from the Node.js server, and send a message to the Node.js server when the button is clicked:\n    \n    ```html\n    \u003cscript\u003e\n    \n    var socket = io();\n    \n    socket.on('fromServer', function(data) {\n      console.log( 'ON: fromServer');\n    });\n    \n    socket.on('time', function(data) {\n      console.log( 'ON: time');\n    });\n    \n    document.getElementById('fromClient').onclick = function(){\n      socket.emit('fromClient', { \"message\":\"Sent from client!\" });\n      console.log( 'EMIT: fromClient');\n    }\n    \n    \u003c/script\u003e\n    ```\n\n5. Create a `package.json` file and add Socket.io as a dependency:\n\n    ```json\n    {\n      \"name\": \"nodejs-socket\",\n      \"version\": \"0.0.1\",\n      \"description\": \"Sample communication from an HTML document to a Node.js server using Socket.io.\",\n      \"dependencies\": {\n        \"socket.io\": \"^2.0.4\"\n      }\n    }\n    ```\n\n6. Create a Node.js file names `app.js` and set up a basic http server:\n\n    ```javascript\n    var http = require('http');\n    var fs = require('fs');\n    var index = fs.readFileSync( 'index.html');\n    \n    var app = http.createServer(function(req, res) {\n        res.writeHead(200, {'Content-Type': 'text/html'});\n        res.end(index);\n    });\n    \n    app.listen(3000);\n    ```\n\n7. Before `app.listen(3000);` add JavaScript to intermitantly send a messages to the HTML file and receive any messages sent form the HTML file:\n\n    ```javascript\n    var io = require('socket.io').listen(app);\n    \n    setInterval(function sendTime() {\n      io.emit('time', { time: new Date().toJSON() });\n      console.log( 'EMIT: time');\n    }, 10000);\n    \n    io.on('connection', function(socket) {\n      socket.on('fromClient',function(data){\n        console.log( 'ON: fromClient');\n        socket.emit('fromServer', { message: 'Received message! Returning message!!' });\n        console.log( 'EMIT: fromServers');\n      });\n    });\n    ```\n\n8. Start the Node.js app:\n\n    ```\n    node app.js\n    ```\n\n9. Open the HTML file using `http://localhost:3000`, open the browser console, and test.\n\n\u003e Full tutorial URL:  \n\u003e https://codeadam.ca/learning/nodejs-socket.html\n\n***\n\n## Repo Resources\n\n* [Visual Studio Code](https://code.visualstudio.com/)\n* [Node.js](https://nodejs.org/en/)\n* [Socket.io](https://socket.io/)\n\n\u003cbr\u003e\n\u003ca href=\"https://codeadam.ca\"\u003e\n\u003cimg src=\"https://cdn.codeadam.ca/images@1.0.0/codeadam-logo-coloured-horizontal.png\" width=\"200\"\u003e\n\u003c/a\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodeadamca%2Fnodejs-socket","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodeadamca%2Fnodejs-socket","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodeadamca%2Fnodejs-socket/lists"}