Menu
In one of my node.js script i am trying to use socket.io in express route. I found many similar questions and tried to implement the solution as suggested but nothing worked out. May be because of my lack of understanding of express routes. I followed below links,
How use socket.io in express routes with node.js
Use socket.io in expressjs routes instead of in main server.js file
This is my app.js
const express = require('express');
const app = express();
const server = require('http').createServer(app);
const io = require('socket.io').listen(server);
const PORT = 3000;
server.listen(PORT);
console.log('Server is running');
var api = require('./routes/api');
//app.use('/api', api);
app.use('/api', (req, res) => {
res.sendFile(__dirname + '/api.html');
});
app.get('/', (req, res) => {
res.send("this is home location");
});
And route file api.js in ./routes folder
var express = require('express');
var router = express.Router();
var fs = require("fs");
var bodyParser = require('body-parser');
const app = express();
const server = require('http').createServer(app);
const io = require('socket.io').listen(server);
console.log("inside api route");
router.get('/', function(req, res, next) {
console.log("api route called");
const connections = [];
var jsonobj = [{name:"john",score:345},{name:"paul",score:678}]
io.sockets.on('connection',(socket) => {
connections.push(socket);
console.log(' %s sockets is connected', connections.length); // this is not printing
socket.on('disconnect', () => {
connections.splice(connections.indexOf(socket), 1);
});
socket.emit('server message', jsonobj);
});
//res.send(jsonobj)
});
module.exports = router;
Socket.emit is not showing data on html page i am rendering on route use. My html code is,
//api.html
<!DOCTYPE html>
<html lang="en">
<body>
<div class="container">
<h1 class="jumbotron">
Node js Socket io with socket route example
</h1>
<div class="results">results</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.4/socket.io.js"></script>
<script>
jQuery(document).ready(function() {
var socket = io.connect();
var jsondata = "";
socket.on('server message', function(data){
console.log('got data from server',data)
jsondata = JSON.stringify(data);
//console.log('jsondata',jsondata)
$('.results').html(jsondata);
});
});
</script>
</body>
</html>
Please suggest what i am supposed to get route socket data in html page. Thanks
327
Socket.IO can be used based on the Express server just as easily as it can run on a standard Node HTTP server.
Ok, let's try to understand why do you need to send data via the socket inside a route in the first place. Websockets are meant for sending data asynchronously without the client having to make a request. If the client is already making an HTTP request, then you can just send the data in the HTTP response.
Now having said there, there are clearly some use cases where you have to send data to some WebSocket channel based on the actions of some OTHER user's requests. If that is the case, there are multiple ways of doing this. One clean way would be to use an event-driven architecture.
Try something like this... find my comments inline below -
const express = require('express');
const router = express.Router();
const fs = require("fs");
const bodyParser = require('body-parser');
const app = express();
const server = require('http').createServer(app);
const io = require('socket.io').listen(server);
// move the socket connection outside of the route controller
// you must register the event listeners before anything else
const connections = [];
io.sockets.on('connection', (socket) => {
connections.push(socket);
console.log(' %s sockets is connected', connections.length); // this is not printing
socket.on('disconnect', () => {
connections.splice(connections.indexOf(socket), 1);
});
});
// Event emitter for sending and receving custom events
const EventEmitter = require('events').EventEmitter;
const myEmitter = new EventEmitter();
myEmitter.on('my-event', function (jsonobj) {
// do something here like broadcasting data to everyone
// or you can check the connection with some logic and
// only send to relevant user
connections.forEach(function(socket) {
socket.emit('server message', jsonobj);
});
});
router.get('/some-route', function (req, res, next) {
const jsonobj = [{ name: "john", score: 345 }, { name: "paul", score: 678 }]
// emit your custom event with custom data
myEmitter.emit('my-event', jsonobj);
// send the response to avoid connection timeout
res.send({ok: true});
});
module.exports = router;
At first glance, it looks like you are delcaring the URL prefix twice. Once in app.js and again in api.js.
Try localhost:port/api/api
If this is the case, change
router.get('/api', function(req, res, next){
to
router.get('/', function(req, res, next){
This will allow you to hit localhost:port/api and access your endpoint.
41
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
