电子:socket.io可以接收但不能发射 [英] Electron: socket.io can receive but not emit

问题描述

我正在创建一个使用Socket.io与服务器应用程序通信的Electron应用程序，但是遇到一个奇怪的问题:尽管我的Electron应用程序成功加入并接收了来自服务器的消息，但它完全无法发出任何内容

客户端

  const io = require('socket.io-client');//...var socket = io("http://localhost:8081");socket.on('welcome'，()=> {console.log('欢迎收到');//显示socket.emit('test')});socket.on('error'，(e)=> {console.log(e);//不显示});socket.on('ok'，()=> {console.log("OK OK");//不显示});socket.on('connect'，()=> {console.log("connected");//显示socket.emit('test');}); 

服务器端:

  io.on('connection'，(client)=> {io.emit('welcome');client.on("test"，()=> {console.log(接收测试");//不显示io.emit("ok");})});io.listen(8081); 

请注意，还有一个Web客户端连接到服务器，并且绝对可以按预期工作.

我在做什么错了?

解决方案

电子具有可进行节点集成的主进程，而具有

应用程序控制台:

当心

为避免这种情况，您必须将WS服务器添加到CSP中.对于本地主机，请在 index.html 标头中使用此标签:

 <元http-equiv ="Content-Security-Policy" content ="default-src'self'ws://localhost:*/socket.io/; script-src'self'ws://localhost:*/socket.io/">< meta http-equiv ="X-Content-Security-Policy" content ="default-src'self'ws://localhost:*/socket.io/; script-src'self'ws://localhost:*/socket.io/> 

这是一个用于所有端口的本地主机服务器，当然，它仅用于开发，您必须在生产中输入普通的WS服务器.

您可以从Github克隆并检查我的工作示例: https://github.com/clytras/电子插座

编辑最后但并非最不重要的;检查并允许在firewal中对nodejs和/或端口进行传入/传出访问.

 电子版本:7.1.2节点版本:12.8.1 

I'm creating an Electron application that uses Socket.io to communicate to a server application, but I'm experiencing a weird issue: whereas my Electron app successfully joins and receives messages from my server, it completely fails to emit anything.

Client-side:

const io = require('socket.io-client');
// ...
var socket = io("http://localhost:8081");

socket.on('welcome', () => {
  console.log('welcome received'); // displayed
  socket.emit('test')
});
socket.on('error', (e) => {
  console.log(e); // not displayed
});
socket.on('ok', () => {
  console.log("OK received"); // not displayed
});
socket.on('connect', () => {
  console.log("connected"); // displayed
  socket.emit('test');
});

Server-side:

io.on('connection', (client) => {
  io.emit('welcome');

  client.on("test", () => {
      console.log("received test"); // not displayed
      io.emit("ok");
  })
});
io.listen(8081);

Note that there is also a Web client that connects to the server, and works absolutely as expected.

What am I doing wrong?

解决方案

Electron has the main process that can have node integration and renderer process that has nodeIntegration turned off by default for security reasons.

If you try to use your client code in the main process (main.js) it will work and receive/emit normal. But if you try to use the client code on the rendered process, then it won't work. You need to add the client code inside the preload.js and then preload it using the webPreferences.preload option of the BrowserWindow like this:

function createWindow () {
  // Create the browser window.
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  // and load the index.html of the app.
  mainWindow.loadFile('index.html')
  ...
}

Then you can have the client code inside preload.js:

const io = require('socket.io-client');
const socket = io(`http://localhost:${process.env.SOCKET_PORT}`);

socket.on('welcome', () => {
  console.log('on welcome : welcome received renderer'); // displayed
  socket.emit('test')
});
socket.on('error', (e) => {
  console.log(e); // displayed ?
});
socket.on('ok', () => {
  console.log("OK received renderer"); // displayed
});
socket.on('connect', () => {
  console.log("connected renderer"); // displayed
  socket.emit('test');
});

begin the socket, start the electron app and see it working:

Socket server:

App console:

Beware of the Content Security Policy (CSP):

To avoid this, you have to add your WS server to your CSP. For localhost use this inside index.html header:

<meta http-equiv="Content-Security-Policy" content="default-src 'self' ws://localhost:*/socket.io/; script-src 'self' ws://localhost:*/socket.io/">
<meta http-equiv="X-Content-Security-Policy" content="default-src 'self' ws://localhost:*/socket.io/; script-src 'self' ws://localhost:*/socket.io/">

It's a localhost server for all ports and of course it's for development only, you have to enter normal WS server in production.

You can clone and check my working example from Github: https://github.com/clytras/electron-sockets

EDIT Last but not least; check and allow incomming/outgoing access for nodejs and/or port in firewal.

Electron version: 7.1.2
Node version: 12.8.1

这篇关于电子:socket.io可以接收但不能发射的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！