如何通过浏览器与桌面应用程序进行通信?

Is it possible to communicate with a desktop application from browser?

是否可以通过浏览器与桌面应用程序进行通信?

I want to do something like this,

我想这样做，

Let's say there is a button in my web application with a URL to a data source and when button is clicked desktop application opens and get that data source URL and process data with desktop application.

假设在我的web应用程序中有一个按钮，它有一个指向数据源的URL，当单击按钮时，桌面应用程序将打开并获取该数据源URL并使用桌面应用程序处理数据。

Is it difficult to do such thing? Any examples?

做这样的事难吗?任何的例子吗?

7 个解决方案

#1

You will need to have something running on the deskop, like a server, and make a request to it for the server to open up an application. You could do it with a Node.js. Of course that requires the server to be running on the client's desktop.

您需要在deskop上运行一些东西，比如服务器，并请求服务器打开一个应用程序。你可以用Node.js来做。当然，这要求服务器在客户机的桌面上运行。

The alternative would be to make a browser extension / plugin, and have people install that. Those extensions could probably launch an application on the desktop.

另一种选择是开发一个浏览器扩展/插件，并让人们安装。这些扩展可能会在桌面上启动一个应用程序。

#2

On windows its trivial to create a custom URL Protocol that's invokable via

在windows上，创建可通过调用的自定义URL协议非常简单

<a href="whatever://somedata">..</a>

< a href = "不管:/ / somedata " > . < / >

This works in IE, FF and Chrome, although in the latter the link must be opened via javascript to avoid omni-bar confusion.

这在IE、FF和Chrome中都是有效的，尽管在后者中，链接必须通过javascript打开以避免全栏混乱。

#3

Hm, you need something like client-server application. The server is a lightweight http server, which is waiting for messages from the client (browser). The browser can communicate with your server via ajax for example.

嗯，您需要一些类似于客户机-服务器应用程序。服务器是一个轻量级http服务器，它正在等待来自客户机(浏览器)的消息。例如，浏览器可以通过ajax与服务器通信。

#4

the desktop application should embed a small server in it, like Jetty. Since the browser content source domain (e.g. www.myDomain.com) is different than the localhost domain of the Jetty, you would run into security problems. These should be overcome by the use of CORS (Cross Origin Resource Sharing) which is a new standard. Using CORS, the Jetty server tells the browser that it/localhost allows Cross domain access to its resources if the requests originate from the source domain www.myDomain.com. For security reasons, i would also make the Jetty reject any request whose source ip is not localhost

桌面应用程序应该在其中嵌入一个小服务器，比如Jetty。由于浏览器内容源域(例如www.myDomain.com)与Jetty的localhost域不同，您可能会遇到安全问题。这些应该通过使用CORS(跨源资源共享)来克服，这是一个新的标准。使用CORS, Jetty服务器告诉浏览器，如果请求来自源域www.myDomain.com，它/localhost允许跨域访问其资源。出于安全原因，我还将使Jetty拒绝任何源ip不是localhost的请求

#5

Here is a clunky suggestion, but I think worth mentioning all the options since the custom URI and running server solutions are pretty involved... Generate a small file containing the parameters of interest, with a custom extension associated with your desktop app. So when the user clicks the browser button they will have to go through the browser's file download dialog/toolbar and maybe some annoying security verification popups... not ideal user experience, but might be the easiest way to implement this type of communication, and doesn't require a process running in the background like a server.

这里有一个笨拙的建议，但是我认为有必要提及所有的选项，因为自定义URI和运行的服务器解决方案都非常复杂……生成一个包含感兴趣参数的小文件，其中包含与桌面应用程序相关联的自定义扩展名。因此，当用户单击浏览器按钮时，他们将不得不通过浏览器的文件下载对话框/工具栏，或者一些烦人的安全验证弹出窗口……不是理想的用户体验，但可能是实现这类通信的最简单方法，而且不需要像服务器那样在后台运行的进程。

I have a web app used within my company for interfacing to old databases and poorly organized files. I need a way to allow the users to open the actual files from the network and not download copies, so they can be edited in place. Considering a solution like this or the custom URI scheme so that a small executable not running in the background can simply be passed the filename and open it for the user directly.

我有一个web应用程序在我的公司内用于接口旧数据库和组织不良的文件。我需要一种允许用户从网络中打开实际文件而不下载副本的方法，这样就可以对它们进行适当的编辑。考虑到这样的解决方案或自定义URI方案，这样一个不运行在后台的小型可执行文件就可以简单地传递文件名并直接为用户打开它。

#6

You can easily add Fleck WebSocket server to your desktop application, and then access this using Websocket.

您可以轻松地将Fleck WebSocket服务器添加到桌面应用程序中，然后使用WebSocket访问它。

Note: Only Windows 8 and 10 support WebSockets through Microsoft's WebSockets implementation, but Fleck will work with Windows 7.

注意:只有Windows 8和10支持通过微软的WebSockets实现的WebSockets，但是Fleck将支持Windows 7。

https://github.com/statianzo/Fleck It's quite easy to add Fleck to your project using NuGet Package Manager:

使用NuGet包管理器很容易在项目中添加Fleck:

Install-Package Fleck

Here is the echo example from Fleck webpage (add this to the C# program to execute during startup):

以下是Fleck网页的echo示例(添加到c#程序中，在启动时执行):

var server = new WebSocketServer("ws://127.0.0.1:8181");
server.Start(socket =>
{
  socket.OnOpen = () => Console.WriteLine("Open!");
  socket.OnClose = () => Console.WriteLine("Close!");
  socket.OnMessage = message => socket.Send(message);
});

In the javascript:

javascript:

var exampleSocket = new WebSocket("ws://127.0.0.1:8181", "protocolOne");

exampleSocket.send("Here's some text that the server is urgently awaiting!");

//and receive (make a listener for the socket) :
exampleSocket.onmessage = function (event) {
  console.log(event.data);
}

#7

In addtion to Alex K's answer for windows... for those looking for solution on macOS and Linux.

关于亚历克斯·K对windows的回答……对于那些在macOS和Linux上寻找解决方案的人来说。

Linux

Most of the modern distros implement freedesktop standards and one of them is desktop files. You can create a desktop file with [service] section.

大多数现代发行版都实现了免费桌面标准，其中之一就是桌面文件。可以使用[service]部分创建桌面文件。

$ cat test.desktop 
[Desktop Entry]
Version=1.0
Terminal=false
Type=Application
Comment=My test app
Name=TestApp
Icon=TestIcon
Exec=/opt/test/test.sh %u
DBusActivatable=true
Categories=Network;
MimeType=x-scheme-handler/test;  <------ This is handler for test://somedata URLs 
NoDisplay=false

Copy this file in /usr/share/applications/test.desktop

在/usr/share/applications/test.desktop中复制此文件

macOS

Simply add something like following in your applications Info.plist file

只需在应用程序信息中添加如下内容。plist文件

    <array>
            <dict>
                    <key>CFBundleTypeIconFile</key>
                    <string>/tmp/test.png</string>
                    <key>CFBundleTypeRole</key>
                    <string>Viewer</string>
                    <key>CFBundleURLName</key>
                    <string>com.mytest</string>
                    <key>CFBundleURLSchemes</key>
                    <array>
                            <string>test</string>  <---- This is handler for test://somedata URLs hit on browser
                    </array>
            </dict>
    </array>