使用电子时无法加载 socket.io.js 文件答案

【问题标题】：Cannot load socket.io.js file when using electron使用电子时无法加载 socket.io.js 文件
【发布时间】：2023-03-22 06:39:01
【问题描述】：

我正在尝试使用带有 Electron 和 Socket.io 的 Node.js 制作聊天应用程序，但是当我尝试加载 /socket.io/socket.io.js 时，我总是收到错误消息：

加载资源失败：net::ERR_FILE_NOT_FOUND

如果我只是在端口 3000 上启动服务器并放入

res.sendFile(__dirname+"/index.html");

然后socket.io.js可以加载，但是如果我使用electron并放

mainWindow.loadURL("File://"+__dirname+"/index.html");

然后它给了我上面提到的错误。

这是我的 index.js 页面的代码：

const electron = require('electron');
const {app, BrowserWindow} = electron;

app.on('ready', function(){
  var mainWindow = new BrowserWindow({
    width: 1400,
    height: 800
  });

  mainWindow.loadURL("File://"+__dirname+"/index.html");
  mainWindow.toggleDevTools();
});

这是我的 server.js 页面：

var express = require('express');
var app = express();
var server = require('http').createServer(app);
var io = require('socket.io').listen(server);

users = [];
connections = [];

server.listen(process.env.PORT || 3000, "localhost");
console.log("Server running...");

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

io.sockets.on('connection', function(socket){
  connections.push(socket);
  console.log('Connected: %s sockets connected', connections.length);

  //Disconect
  socket.on('disconnect', function(data){
    connections.splice(connections.indexOf(socket), 1);
    console.log('Disconnected: %s sockets connected', connections.length);
  });

  //Send message
  socket.on('send message', function(data){
    console.log("Message Received");
    io.sockets.emit('new message', data);
  });
});

这是我的 index.html 页面：

 <html>
  <head>
    <title>Chat Server</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <link rel = "stylesheet" href="./style.css">
  </head>
  <body>
    <div id="chat"></div>
    <form id="info">
      <textarea placeholder="Message" col="50" id="message"></textarea>
      <input type = "submit" value="Send"></input>
    </form>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script src="/socket.io/socket.io.js"></script>
    <script>
    var socket = io.connect();
      $(function(){
        var socket = io.connect();
        var messageForm = $("#info");
        var message = $("#message");
        var chat = $("#chat");

        messageForm.submit(function(e){
          e.preventDefault();
          console.log("A message has been submited.");
          socket.emit('send message', message.val());
          message.val(" ");
        });

        socket.on('new message', function(data){
          chat.append("<div class='chat-message'><div class='chat-user'>Max Braun</div><div class='chat-text'>"+data+"</div><div class=''>8/30/1999 at 8:33 PM</div></div>");
        });
      });
    </script>
  </body>
</html>

【问题讨论】：

Failed to load resource: net::ERR_FILE_NOT_FOUND 还应该指出哪个资源加载失败，那是什么？
我也遇到了同样的问题。最后，我只是在渲染过程中使用了socket.io-client。

标签： jquery node.js socket.io electron

【解决方案1】：

柚木评论是对的，开发模式下的套接字 io 在应用程序的主根目录中公开了一个 api 路由 /socket.io/socket.io.js，一旦你用电子打包应用程序，这将不再起作用。因此解决方案是修改套接字 io 客户端库的入口点，并将其替换为 CDN 或您将包含在应用程序中的本地文件。

所以而不是这个

 <script src="/socket.io/socket.io.js"></script>

你可以放这个

<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.4.8/socket.io.min.js"></script>

希望对你有帮助！

【讨论】：