I'm trying to send a JSON object from active.ejs(client) to index.js(server) when a socket connection is established.
However, the query parameter of the socket object sent to the server isn't the JSON object (it's an empty object) I passed when I try to log the socket object in the server.
active.ejs
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Active</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="http://localhost:4000/socket.io/socket.io.js"></script>
</head>
<body>
<script>var socket = io.connect('http://localhost:4000/tune-in', {query: "<%= user_info %>"}); %></script>
<p>
Welcome,
<%= user_info.uri %>
</p>
</body>
</html>
This is how the user_info object is passed from controller.js to the above html(ejs) file active.ejs
app.get('/tune-in', function(req, res){
res.render('active', {user_info: user_data});
});
Here's what the user_info object looks like -
{ country: 'US',
display_name: 'My name',
email: 'myname@gmail.com',
external_urls: { spotify: 'https://open.spotify.com/user/randomnums' },
followers: { href: null, total: 3 },
href: 'https://api.spotify.com/v1/users/randomnums',
id: 'randomstring',
images:
[ { height: null,
url: 'myimg',
width: null } ],
product: 'premium',
type: 'user',
uri: 'spotify:user:randomstring' }
index.js - Where the above JSON data should be logged
var io = socket(server);
io.on('connection', function(socket){
console.log('Made socket connection', socket);
});
When I log the socket object, the query parameter looks like -
query:
{ '[object Object]': 'undefined',
EIO: '3',
transport: 'polling',
t: 'LrEFaoW' } },
My intended usage is being able to do something like socket.broadcast.emit('users', data); in index.js where data is a JSON object containing a few of the fields of the user_info (or the query object).
And in active.ejs, I'd like to do something like -
<script>
var socket = io.connect('http://localhost:4000/tune-in', {query: "<%= user_info %>"}); %>
var active = document.getElementById('active');
socket.on('users', function(data){
active.innerHTML += "<li><em>" + data.display_name + " is connected" + "</em></li>";
});
</script>
EDIT: The above mentioned possible duplicate did not solve my problem, ie replacing {query: "<%= user_info %>"} with {query: "<%-JSON.stringify(user_info)%>"} didn't solve the issue. Instead I got errors saying UnexpectedIdentifier on the client side.
EDIT2 The error was with {query: "<%-JSON.stringify(user_info)%>"} the double quotes " " around <%-JSON.stringify(user_info).
