CODEWITHSUNDEEP
javascriptnode.jssocketssocket.io
Nahid Ataei
Nahid Ataei

Reputation: 59

include socket.io server into my html

I have run my nodeServer and Client sucessfully. But I want to connect its server to a proxy. Here is the node client:

<html>
<head>
  <script src="http://localhost:8000/socket.io/socket.io.js"></script>
  <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
  <script>
     var name = '';
     var socket = io.connect('http://localhost:8000');

     // at document read (runs only ones).
     $(document).ready(function(){
        // on click of the button (jquery thing)
        // the things inside this clause happen only when 
        // the button is clicked.
        $("button").click(function(){

           // just some simple logging
           $("p#log").html('sent message: ' + $("input#msg").val());

           // send message on inputbox to server
           socket.emit('chat', $("input#msg").val() );

           // the server will recieve the message, 
           // then maybe do some processing, then it will 
           // broadcast it again. however, it will not 
           // send it to the original sender. the sender
           // will be the browser that sends the msg. 
           // other browsers listening to the server will
           // recieve the emitted message. therefore we will
           // need to manually print this msg for the sender.
           $("p#data_recieved").append("<br />\r\n" + name + ': ' + $("input#msg").val());

           // then we empty the text on the input box.
           $("input#msg").val('');
        });

        // ask for the name of the user, ask again if no name.
        while (name == '') {
           name = prompt("What's your name?","");
        }

        // send the name to the server, and the server's 
        // register wait will recieve this.
        socket.emit('register', name );
     });

     // listen for chat event and recieve data
     socket.on('chat', function (data) {

        // print data (jquery thing)
        $("p#data_recieved").append("<br />\r\n" + data.msgr + ': ' + data.msg);

        // we log this event for fun :D
        $("p#log").html('got message: ' + data.msg);

     });
  </script>
</head>
<body>
  <input type="text" id="msg"></input><button>Click me</button>
  <p id="log"></p>
  <p id="data_recieved"></p>
</body>
</html>

Here is Server:

var check="check";
var io = require('socket.io').listen(8000);

// open the socket connection
io.sockets.on('connection', function (socket) {

// listen for the chat even. and will recieve
// data from the sender.
console.log('hello nahid');
socket.on('chat', function (data) {

  // default value of the name of the sender.
  var sender = 'unregistered';
  check=sender;
  // get the name of the sender
  socket.get('nickname', function (err, name) {
     console.log('Chat message by ', name);
     console.log('error ', err);
     sender = name;
  });   

  // broadcast data recieved from the sender
  // to others who are connected, but not 
  // from the original sender.
  socket.broadcast.emit('chat', {
     msg : data, 
     msgr : sender
  });
});

// listen for user registrations
// then set the socket nickname to 
socket.on('register', function (name) {

  // make a nickname paramater for this socket
  // and then set its value to the name recieved
  // from the register even above. and then run
  // the function that follows inside it.
  socket.set('nickname', name, function () {

     // this kind of emit will send to all! :D
     io.sockets.emit('chat', {
        msg : "naay nag apil2! si " + name + '!', 
        msgr : "mr. server"
     });
  });
});


});

They work well together. Now I want to have included server file into another html client like this:

<script type="text/javascript" src="nodeServer.js"></script>

In order to access variables in nodeServer.js. But The error "Uncaught ReferenceError: require is not defined " What can I do to solve this and also I have this line code : such that it knows what socket.io syntax is. But the error exists.

What should I do to make my html file know socket.io.js.

EDIT:

The last comment on the checked answer is what solved my issue. Thanks to @Houseman.

Upvotes: 1

Views: 11790

Answers (1)

user773737
user773737

Reputation:

I'm pretty sure you can't just throw a Node.js file into a html DOM and expect it to work. Node.js files are run by Node.js, not by client-side html javascript.

This line <script src="http://localhost:8000/socket.io/socket.io.js"></script> is sufficient for loading the io object into your DOM, and make it accessible through javascript.

Remove this line:

<script type="text/javascript" src="nodeServer.js"></script>

, and you should be fine, if your server is running on port 8000. Your server code, however, doesn't seem to have the necessary components to actually run.

EDIT:

If you want to pass variables from your client to your server, or the other way around, use sockets, just like you're already doing.

Upvotes: 3

Related Questions