https://github.com/codeadamca/nodejs-socket
Using Socket.io to communicate between a browser and a Node.js app.
https://github.com/codeadamca/nodejs-socket
javascript nodejs socket
Last synced: about 2 months ago
JSON representation
Using Socket.io to communicate between a browser and a Node.js app.
- Host: GitHub
- URL: https://github.com/codeadamca/nodejs-socket
- Owner: codeadamca
- Created: 2020-09-12T03:28:56.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2025-01-26T22:15:57.000Z (5 months ago)
- Last Synced: 2025-03-31T07:18:41.372Z (3 months ago)
- Topics: javascript, nodejs, socket
- Language: HTML
- Homepage:
- Size: 26.4 KB
- Stars: 3
- Watchers: 1
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# A Sample Interaction using Node.js and Socket
This 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.
## Steps
1. Create an HTML file with the basic required HTML tags:
```html
Node.js and Socket.io
```
2. Include the Socket.io CDN in the `head` section:
```html
```
3. Add a button to the `body` section:
```html
From Client
```
4. 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:
```html
var socket = io();
socket.on('fromServer', function(data) {
console.log( 'ON: fromServer');
});
socket.on('time', function(data) {
console.log( 'ON: time');
});
document.getElementById('fromClient').onclick = function(){
socket.emit('fromClient', { "message":"Sent from client!" });
console.log( 'EMIT: fromClient');
}
```
5. Create a `package.json` file and add Socket.io as a dependency:
```json
{
"name": "nodejs-socket",
"version": "0.0.1",
"description": "Sample communication from an HTML document to a Node.js server using Socket.io.",
"dependencies": {
"socket.io": "^2.0.4"
}
}
```
6. Create a Node.js file names `app.js` and set up a basic http server:
```javascript
var http = require('http');
var fs = require('fs');
var index = fs.readFileSync( 'index.html');
var app = http.createServer(function(req, res) {
res.writeHead(200, {'Content-Type': 'text/html'});
res.end(index);
});
app.listen(3000);
```
7. Before `app.listen(3000);` add JavaScript to intermitantly send a messages to the HTML file and receive any messages sent form the HTML file:
```javascript
var io = require('socket.io').listen(app);
setInterval(function sendTime() {
io.emit('time', { time: new Date().toJSON() });
console.log( 'EMIT: time');
}, 10000);
io.on('connection', function(socket) {
socket.on('fromClient',function(data){
console.log( 'ON: fromClient');
socket.emit('fromServer', { message: 'Received message! Returning message!!' });
console.log( 'EMIT: fromServers');
});
});
```
8. Start the Node.js app:
```
node app.js
```
9. Open the HTML file using `http://localhost:3000`, open the browser console, and test.
> Full tutorial URL:
> https://codeadam.ca/learning/nodejs-socket.html
***
## Repo Resources
* [Visual Studio Code](https://code.visualstudio.com/)
* [Node.js](https://nodejs.org/en/)
* [Socket.io](https://socket.io/)
