如何更改socket.io聊天应用程序，使其使用外部javascript和css文件？_Javascript_Jquery_Socket.io

如何更改socket.io聊天应用程序，使其使用外部javascript和css文件？

javascript jquery socket.io

如何更改socket.io聊天应用程序，使其使用外部javascript和css文件？,javascript,jquery,socket.io,Javascript,Jquery,Socket.io,我为socket.io聊天应用程序做了演示，但在演示中，html文件中有javascript/jquery和css内联。我如何修改此应用程序，使内联脚本和css可以位于发送给客户端并由客户端使用的外部文件中以下是服务器代码： //index.js var app = require('express')(); var http = require('http').Server(app); var io = require('socket.io')(http); app.get('/', fun

我为socket.io聊天应用程序做了演示，但在演示中，html文件中有javascript/jquery和css内联。我如何修改此应用程序，使内联脚本和css可以位于发送给客户端并由客户端使用的外部文件中

以下是服务器代码：

//index.js
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
app.get('/', function(req, res){
  res.sendFile(__dirname + '/public/index.html');
});

io.on('connection', function(socket){
    socket.on('chat message', function(msg){
    io.emit('chat message', msg);
  });
});

http.listen(3000, function(){
  console.log('listening on *:3000');
});

这里是html：（我添加了一条注释，我想在一个单独的js文件中启动脚本）

//index.html
Socket.IO聊天
Socket.IO聊天应用程序
命令：“/nick”设置昵称，“/join”加入/创建聊天室，“/leave”离开聊天室
//以下是我希望在单独文件中的CSS：
*{边距：0；填充：0；框大小：边框框；}
正文{字体：13px Helvetica，Arial；}
表单{background:#000；填充：3px；位置：固定；底部：0；宽度：100%；}
表单输入{边框：0；填充：10px；宽度：90%；右边距：5%；}
窗体按钮{宽度：9%；背景：rgb（130224255）；边框：无；填充：10px；}
#消息{列表样式类型：无；边距：0；填充：0；}
#消息li{padding:5px 10px；}
#信息李：第n个孩子（奇数）{背景：#ddd；}
正文{背景色：白色；颜色：黑色；}
//下面是我希望位于单独文件中的JAVASCRIPT/JQUERY：
var nick=“”；
var房间=”；
$（函数（）{
var socket=io（）；
$（'form'）。提交（函数（）{
var消息={
尼克：尼克，
房间：房间，
消息：$（'#m'）.val（）
};
if（$（'#m'）.val（））.startsWith（“/nick”））{
尼克=（$（'#m'）.val（））.slice（6）+：“；
message.nick=nick；
控制台日志（尼克）；
}
else if（$（'#m'）.val（））.startsWith（“/join”））{
房间=（$（'#m'）.val（））.slice（6）；
message.room=房间；
控制台、日志（房间）；
}
else if（$（'m'）.val（））.startsWith（“/leave”））{
房间=”；
message.room=房间；
控制台、日志（房间）；
}
否则{
emit（'chat message'，message）；}
$（'m'）.val（''）；
返回false；
});
socket.on（'chat message'，函数（msg）{
console.log（“来自“+msg.nick+”房间中“+msg.room+”的消息，上面写着“+msg.Message”）；
如果（msg.room==房间）{
$（“#消息”）.append（$（“”）.text（msg.nick+“”+msg.message））；
}
});
});

发送

只需将所有代码移动到一个文件中，然后使用

。为什么您认为这与其他外部JS文件有任何不同？CSS也是如此。当我尝试获取：get 404（未找到）时，消息似乎很清楚，您要么将文件放在错误的位置，要么提供了错误的URL。您确定要将它与HTML放在同一个文档根目录中吗？

//index.html
<!doctype html>
<html>
  <head>
    <title>Socket.IO chat</title>
    <header>
      <center>
      <h1>
        Socket.IO Chat App
      </h1>
      <h4>
      Commands: "/nick" to set nickname, "/join" to join/create chatroom, "/leave" to leave chatroom
    </h4>
    </center>
    </header>

    //HERE IS THE CSS THAT I WANT TO BE IN A SEPARATE FILE:
    <style>
      * { margin: 0; padding: 0; box-sizing: border-box; }
      body { font: 13px Helvetica, Arial; }
      form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
      form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
      form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
      #messages { list-style-type: none; margin: 0; padding: 0; }
      #messages li { padding: 5px 10px; }
      #messages li:nth-child(odd) { background: #ddd; }
      body { background-color: white; color: black;}
    </style>
  </head>
  <script src="/socket.io/socket.io.js"></script>
  <script src="https://code.jquery.com/jquery-1.11.1.js"></script>

  //HERE IS THE JAVASCRIPT/JQUERY THAT I WANT TO BE IN A SEPARATE FILE:
  <script>
    var nick = "";
    var room = "";
    $(function () {
      var socket = io();
      $('form').submit(function(){
        var message = {
          nick: nick,
          room: room,
          message: $('#m').val()
        };
        if(($('#m').val()).startsWith("/nick ")){
          nick = ($('#m').val()).slice(6) + ": ";
          message.nick = nick;
          console.log(nick);
        }
        else if(($('#m').val()).startsWith("/join ")){
          room = ($('#m').val()).slice(6);
          message.room = room;
          console.log(room);
        }
        else if(($('#m').val()).startsWith("/leave")){
          room = "";
          message.room = room;
          console.log(room);
        }
        else{
        socket.emit('chat message', message);}
        $('#m').val('');
        return false;
      });
      socket.on('chat message', function(msg){
        console.log("Message from " + msg.nick + " in room " + msg.room + " saying: " + msg.message);
        if(msg.room == room){
          $('#messages').append($('<li>').text(msg.nick + " " + msg.message));
        }
      });
    });
  </script>
  <body>
    <ul id="messages"></ul>
    <form action="">
      <input id="m" autocomplete="off" /><button>Send</button>
    </form>
  </body>
</html>