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

时间:2016-09-18 21:23:32

标签: jquery node.js socket.io electron

我正在尝试使用带有电子和socket.io的node.js创建聊天应用程序,但是当我尝试加载/socket.io/socket.io.js时,我总是得到错误:

无法加载资源:net :: ERR_FILE_NOT_FOUND

如果我只是在端口3000上启动服务器并放入res.sendFile(__ dirname +“/ index.html”); socket.io.js可以加载,但如果我使用电子并放入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>

1 个答案:

答案 0 :(得分:1)

柚木评论是正确的,处于开发模式的套接字io会在应用程序的主根处显示api路由/socket.io/socket.io.js,一旦用电子打包应用程序,这将不再起作用。所以解决方案是修改socket 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>
希望它有所帮助!