如何將外部socket.io客戶端代碼鏈接到HTML頁面？

我沒有任何運氣搜索到目前爲止的答案 - 我得到的最接近是這個話題
Using socket.io without client embedded in html 如何將外部socket.io客戶端代碼鏈接到HTML頁面？

但是，這並不能真正解決問題。

我最近一直在學習WebSockets，特別是使用node.js，許多教程使用socket.io作爲選擇的節點模塊。

但是，似乎所有在線資源都有示例代碼，它將HTML頁面上的所有客戶端功能嵌入<script></script>標記中，而不是將其鏈接到外部Javascript文件。

我一直在關注使用socket.io演示簡單聊天應用的教程 - 示例代碼僅包含兩個文件（index.html和server.js）。有一些客戶端代碼嵌入在HTML腳本標籤中：

<script> 
     var socket = io('http://localhost:5000'); 

     socket.on('message.sent', function (data) { 
      $('#messages').prepend(` 
       <div> 
        <hr /> 
        <div><strong>${data.username}</strong></div> 
        <p>${data.message}</p> 
       </div> 
      `); 
     }); 

     $(function() { 
      $('#message-form').on('submit', function (e) { 
       e.preventDefault(); 
       socket.emit('message.send', { 
        message: $('#message').val(), 
        username: $('#username').val() 
       }); 
      }); 
     }); 
</script>

但我想弄清楚如何鏈接到外部文件。

我試圖把客戶端代碼到外部文件（例如，「client.js」），並連接成HTML頁面：

<script src="client.js"></script>

然而，當我這樣做，控制檯顯示我404錯誤告訴我，它無法找到http://localhost:5000/client.js

這個應用程序很簡單，但隨着教程的繼續，它只是在整個腳本標記中堆積大量客戶端代碼。如果可能的話，我寧願學習如何在外部連接代碼。

我在粘貼的情況下這兩個文件低於它的任何可能有關：

的index.html：

<!DOCTYPE html> 
<html> 
    <head> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" /> 
    </head> 
    <body> 
     <div class="container"> 
      <form id="message-form"> 
       <p> 
        <label>Username</label> 
        <input class="form-control" id="username" /> 
       </p> 
       <p> 
        <label>Message</label> 
        <textarea class="form-control" id="message"></textarea> 
       </p> 
       <button class="btn btn-primary" type="submit">Send</button> 
      </form> 
      <div id="messages"></div> 
     </div> 


     <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script> 
     <script src="/socket.io/socket.io.js"></script> 
     <script> 
     var socket = io('http://localhost:5000'); 

     // Update the users count 
     socket.on('message.sent', function (data) { 
      $('#messages').prepend(` 
       <div> 
        <hr /> 
        <div><strong>${data.username}</strong></div> 
        <p>${data.message}</p> 
       </div> 
      `); 
     }); 

     $(function() { 
      $('#message-form').on('submit', function (e) { 
       e.preventDefault(); 
       socket.emit('message.send', { 
        message: $('#message').val(), 
        username: $('#username').val() 
       }); 
      }); 
     }); 
     </script> 


    </body> 
</html>

server.js，如果它是相關的：

var express = require('express'), 
    app = express(), 
    http = require('http'), 
    socketIO = require('socket.io'), 
    server, io; 

app.get('/', function (req, res) { 
    res.sendFile(__dirname + '/index.html'); 
}); 

server = http.Server(app); 
server.listen(5000); 

io = socketIO(server); 

io.on('connection', function (socket) { 
    socket.on('message.send', function (data) { 
     io.emit('message.sent', data); 
    }); 
});

來源

2016-10-20 ooticorn

控制檯顯示404錯誤，告訴我它找不到

因爲您的Web服務器不提供靜態內容。在app.get...前行

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

，創建一個名爲「公共」的新文件夾並移動client.js文件到這個文件夾：

只是這行添加到您的server.js。

查看更多關於here

來源

2016-10-20 22:03:17 yeya

謝謝！這解決了這個問題，並且幫助我理解了表達更好一點。 – ooticorn

如何將外部socket.io客戶端代碼鏈接到HTML頁面？

回答

相關問題