将socket.io服务器包含到我的html中

include socket.io server into my html

本文关键字：我的 html 包含 socket io 服务器      更新时间：2023-09-26

我已经成功运行了nodeServer和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>

这是服务器：

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"
     });
  });
});

});

他们合作得很好。现在我想将服务器文件包含到另一个html客户端中，如下所示：

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

为了访问nodeServer.js中的变量。但是错误"Uncaught ReferenceError:require未定义"我能做些什么来解决这个问题，而且我有以下行代码：这样它就知道socket.io语法是什么。但错误是存在的。

我应该怎么做才能让我的html文件知道socket.io.js.

编辑：

对勾选答案的最后一条评论解决了我的问题。感谢@Houseman。

我敢肯定，你不能只是把Node.js文件扔到html DOM中，然后期望它能工作。Node.js文件由Node.js运行，而不是由客户端的html javascript运行。

这一行<script src="http://localhost:8000/socket.io/socket.io.js"></script>足以将io对象加载到DOM中，并使其可以通过javascript访问。

删除此行：

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

，如果您的服务器在8000端口上运行，那么您应该没事。然而，您的服务器代码似乎没有实际运行所需的组件。

编辑：

如果您想将变量从客户端传递到服务器，或者反过来，请使用套接字，就像您已经在做的那样。

相关文章：