CODEWITHSUNDEEP
javascriptnode.jsexpress
shamon shamsudeen
shamon shamsudeen

Reputation: 5848

Express js chat application:404 error on socket.io.js file

I am trying to develop a chat application using Express js(jade template ) and socket.io.Here is my app.js 

var express = require('express');
var path = require('path');
var http = require('http');
var io = require('socket.io')(http);
var app = express();
//start chat with socket io
io.sockets.on('connection',function(socket){
  console.log("connection");
  socket.on('send message',function(data,callback){
    var msg=data.trim();
    if(msg==null){
      callback("enter a messsage");
    }else{
      console.log("chat message"+msg);
      io.sockets.emit('new message',{msg:msg});
    }
  });
});
//end socket

Here is my chat.js file on client side

$(document).ready(function(){
    var socket=io.connect('http://localhost:3000');
    var $message=$('#message');
    var $messageForm=$('#send-message');
    //opens a connection and send to sever
    $messageForm.submit(function(e){
             e.preventDefault();
             socket.emit('send message',$message.val(),function(data){
              console.log("data"+data);
             });
             $message.val('');
           });
    //read the chat messages from users
    socket.on('new message',function(data){
        console.log('data.msg');
    });
});

chat.jade file

<form id="send-message">
<input type="text" id="message">
<input type="submit" value="submit"/>
</form>
<script src="http://localhost/api/jquery.min.js"></script>
<script src="http://localhost:3000/socket.io/socket.io.js"></script>

I will get 404 error on this file http://localhost:3000/socket.io/socket.io.js. Also get a Uncaught ReferenceError: io is not defined in chat.js script.I think this is because of missing socket.io.js file.

Upvotes: 0

Views: 207

Answers (1)

Craicerjack
Craicerjack

Reputation: 6332

You have a couple of issues.
Serving static files in your jade templates you should be using something like this: 

link(rel='text/javascript', href='/js/socket.io.js')

These files will normally be contained within a public directory in your express app. Then in your app.js you should have something like:

app.use(express.static('public'));

Its explained here on the express site - http://expressjs.com/starter/static-files.html

Elsewhere 

Uncaught ReferenceError: io is not defined  

$(document).ready(function(){
    var socket=io.connect('http://localhost:3000');

This is because you havent defined io on your client. You call connect on something called io but havent declared/defined io anywhere.

Also You havent created a socket server on your app side. You should be doing something along the lines of: 

var express = require('express');
var app = express();
var server = require('http').createServer(app);
var io = require('socket.io')(server);
var port = process.env.PORT || 3000;

server.listen(port, function () {
  console.log('Server listening at port %d', port);
});  
io.on('connection', function (socket) {
    // when the client emits 'new message', this listens and executes
    socket.on('new message', function (data) {
        // we tell the client to execute 'new message'
        socket.broadcast.emit('new message', {
        });
    });

Example
Socket.io have an example chat app on github that you should use as reference.
Your chat.js would be the equivalent of their public/main.js
Your chat.jade is equivalent to their public/index.html
and your app.js matches their index.js

Upvotes: 3

Related Questions