I try to use Socket.io with my website.
My app.js:
var http = require('http');
var fs = require('fs');
var server = http.createServer(function(req, res) {
fs.readFile('./index.html', 'utf-8', function(error, content) {
res.writeHead(200, {"Content-Type": "text/html"});
res.end(content);
});
});
var io = require('socket.io').listen(server);
io.sockets.on('connection', function (socket) {
console.log('Connected !');
});
server.listen(8080);
My index.html (with Nginx):
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io.connect('http://localhost:8080');
</script>
When I'm connect to my website, i have that error in my client console (chrome):
Uncaught SyntaxError: Unexpected token <
Uncaught ReferenceError: io is not defined
What is the problem ?
Thanks !
This is because your HTML file being served to the references a file local to your server, specifically
/socket.io/socket.io.js
. Your app.js file should either include the contents of that file if you want to serve it directly from the file system, or better yet reference a CDN for the client to get the socket.io script file:
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.1.0/socket.io.js"></script>
<script> var socket = io.connect('http://localhost:8080'); </script>
Related
How do I write a script to permanently change a static html file after making an ajax call to the node.js server? Any examples would be greatly appreciated :)
I agree with NikxDa that this is probably not the best solution for you, but this code should do the trick.
/write.js
var http = require('http');
var fs = require('fs');
var url = require('url');
//Lets define a port we want to listen to
const PORT=8080;
function handleRequest(request, response){
var path = url.parse(request.url).pathname;
if(path=="/write"){
fs.appendFile('message.html', 'Node.js!', function (err) {
if (err) throw err;
console.log('It\'s saved!');
});
} else {
fs.readFile('index.html',function (err, data){
response.writeHead(200, {'Content-Type': 'text/html','Content-Length':data.length});
response.write(data);
response.end();
});
}
}
// Create a server.
var server = http.createServer(handleRequest);
server.listen(PORT, function(){
console.log("Server listening on: http://localhost:%s", PORT);
});
/index.html
<!DOCTYPE html>
<head>
<script>
function writeIt()
{
xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET","http://localhost:8080/write", true);
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
string=xmlhttp.responseText;
document.write(string + ": Saved change to message.html");
}
}
xmlhttp.send();
}
</script>
</head>
<body>
<p>Click the button to send an AJAX request to `write.js`<p>
<br><button onclick="writeIt()">Click Me</button>
</body>
/message.html
Node.js!
Editing the file directly via node would probably be really bad, I do not even know if it is at all possible. I think the better solution is for your Node Server to make the data you want to change accessible and then use jQuery or Angular to update the HTML-File when it is actually loaded.
Another approach would be to use a templating engine like https://github.com/tj/ejs, and then serve the file via Node directly, so you can change the data in the Node-Application itself every time.
I can't seem to call a server function from my client using either socket.io or an ajax call. Any help would be appreciated. For socket.io, I was trying something like this:
server (no error is being thrown, only I never see the console.log):
var app = express();
var server = require('http').Server(app);
var io = require('socket.io')(server);
var socket = io.sockets.on('connection', function(socket) {});
socket.on('admin-refresh', function() {
console.log("*** Admin refresh ***");
});
client (yes I'm including all necessary files, no error is being thrown on client side nor server):
$('document').ready(function() {
var socket = io();
$('#refresh').click(function() {
console.log('refresh clicked..');
io.emit('admin-refresh');
});
});
I don't need any data to be passed, I just want to alert the server to call a function. So perhaps an ajax call would be easier? How would I set up the server to listen for calls?
Why do you have an empty connection callback..? Look at the docs again.
var app = express();
var server = require('http').Server(app);
var io = require('socket.io')(server);
io.on('connection', function(socket) {
socket.on('admin-refresh', function() {
console.log("*** Admin refresh ***");
});
});
I'm trying to use socket.io with koa.js and I was able to connect adding server = require('http').createServer(koa.callback()).listen(port); and io = require('socket.io')(server); at the very bottom of my application but now I want to emit and if possible listen to events from my controller / route. What's the best way to implement this?
I've tried adding io in my koa context like koa.context.io = io and even io.on('connection', function(socket){ koa.context.socket = socket }); but nothing is working.
Thanks in advance guys.
Accessing the socket.io instance in your koa route should not work.
Creating the socket.io instance depends on the application creating a callback function that can be used by the http server.
var server = http.createServer(app.callback());
var io = require('socket.io')(server);
This callback is generated with the help of co and requires that your app is already set up with all the middleware/routes. (see the koa source). Therefore you can't use the socket.io instance (which is created afterwards) in those routes.
Furthermore I think it is not intended to emit socket.io events in your controllers. If you want to send data back to the client that called the controller, you should do it in the response which is generated by that controller. If you want to emit further events at the server you could trigger them from the client by emitting an event that the server will receive. This way you can process the data from the client in the function you pass to socket.on(...) and don't need to implement it in the controller/routes for koa.
Here is an example for the second case, without any koa controller/route.
app.js:
var http = require('http');
var koa = require('koa');
var app = koa();
var send = require('koa-send');
app.use(function* (next) {
if (this.path !== '/') return yield next;
yield send(this, __dirname + '/index.html');
});
var server = http.createServer(app.callback());
var io = require('socket.io')(server);
io.on('connection', function (socket) {
socket.on('click', function (data) {
//process the data here
console.log('client clicked! data:');
console.log(data);
// emit an event
console.log('responding with news');
socket.emit('news', { hello: 'world' });
});
});
var port = process.env.PORT || 3000;
server.listen(port);
console.log ('Listening at port ' + port + ' ...');
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>koa-socket.io</title>
</head>
<body>
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io('http://localhost:3000');
socket.on('news', function (data) {
console.log('received news with data: ');
console.log(data);
});
function myclick () {
console.log("click");
socket.emit('click', { clickdata: 'i clicked the button' });
}
</script>
<button type="button" onclick="myclick();">Click Me and watch console at server and in browser.</button>
</body>
</html>
I realise this is a little late on the uptake, and could be deemed slightly self-serving as I'm going to suggest one of my own modules, but, you're on the right track with appending it to the app, with Koa v2 this is easier as the context is passed right along but with v1 you can tack it onto this, as koa middleware's are bound to the app instance.
Alternatively, I wrote a module to help with this exact use-case, https://github.com/mattstyles/koa-socket, it does just 2 things currently (and probably forever): it appends the socket.io server instance to the context and it allows you to write koa-style middleware for your socket listeners.
I'm actually working on a little application. I have one server written in C which is listening on the port 5260. In the other side I have a NodeJS client which is listening on the port 7777. A HTML page can be reach via this port. In the HTML page I have a simple button.
When I click on this one a message is sent to my NodeJS server and is written on the terminal. Now I would like to fetch this command and send it to my C server which is still running and waiting for a request.
My client.js :
var http = require('http');
var ejs = require('ejs');
var express=require('express');
var app = express();
app.engine('html', ejs.renderFile);
app.set('/', __dirname);
app.get('/', function(request,response) {
response.render('index.ejs.html');
})
var options = {
host: '192.168.1.154',
path: '/',
port: '5260',
method: 'POST'
};
app.post('/play', function(req, res){
var res = http.request(options);
console.log("START_BG;BG1\n");
});
app.listen(7777);
And my HTML file :
<html>
<head>
<script type="text/javascript" src="client.js"></script>
<script type="text/javascript">
function sendMessage() {
var xhr = new XMLHttpRequest();
xhr.open('POST', '/play', true);
xhr.onload = function() {
console.log(xhr);
};
xhr.send();
}
</script>
</head>
<body>
<button onclick="sendMessage()">VIDEO</button>
</body>
</html>
Well. I see some strange things in your code
1 You're making the post request to 192.168.1.254:5620/play without sending any data on it
2 You're not waiting fro the request to end and blindly print on your console without checking the result. Don't know if its the desired behaviour, but it seems a bit strange
Without more knowledge about the scenario is difficult to suggest an idea.
What is the answer you expect from the remote server?
It's suposed to print something in the (remote) console ?
What it should return via HTTP ?
Anyway I suggest you correct your code as follows:
app.post('/play', function(req, res){
var res = http.request(options, function(response){
// do any checking about response status and/or body if any
console.log("START_BG;BG1\n");
});
});
I am running node v0.5.11 pre
and installed socket.io. I have also install socket.io version 0.9.1
I am running server standard.
var io = require('socket.io').listen(8080);
io.sockets.on('connection', function (socket) {
socket.emit('news', { hello: 'world' });
socket.on('my other event', function (data) {
console.log(data);
});
});
which is standard server and following is client ..
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io.connect('171.69.117.215:8080');
socket.on('news', function (data) {
console.log(data);
socket.emit('my other event', { my: 'data' });
});
</script>
when I load client in Firefox using port 80 from server 171.69.117.215 I get in Firebug following error:
io is not defined
[Break On This Error]
var socket = io.connect('171.69.117.215:8080');
I know it is deployment issue as I am loading from port 80 client, which is right way to deploy socket.io application ?
Thanks in advance.
Please insert into client code ..Point to your on node.js server.
<script src="http://yournodeserver/socket.io/socket.io.js"></script>