之前在做到一个需求 电脑接了多个显示器 要在主屏上显示web界面 第二个屏幕上通过主屏来调起第二个界面
之前在网上看到的方案 :通过window.open(url, name, fulls)来打开浏览器 计算位置来放打开的界面 但是这个有兼容性 好像只在火狐生效 。 还有通过ActiveXObject 插件来控制啥的 我也不知道ActiveXObject是啥 反正我是没实现,文章来源js控制屏幕双屏显示
面对这个需求 可能在店铺里面见得比较多 收银机之类的 前面收银员收钱的屏幕 背面还有个打广告 显示收款信息的屏幕 这样说应该比较好理解 现在看来纯web网页端实现多多少少会有问题(话不能说的太满容易打脸)哈哈 之后发现了新的方式 也就是我下面要讲的方式 通过c语言或者其他的语言 来做一个桌面端控件 让web网站来调起这个控件 通过websocket连接来打通它们的联络实现数据共享
至于用什么语言来写桌面端的控件看你或者公司里人会用什么语言了,我只会前端所以接下来讲的会是用前端的东西来讲实现方案,下面列举了5中比较流行的框架,我用的第一种,毕竟咱前端流行开发工具 vscode工具也是来自它。
时下最流行的5个用于桌面应用程序开发的 JS 框架
- Electron
- NodeGUI
- Proton Native
- NW.js
- AppJS
使用步骤
1.搭建Electron项目:首先你要明确搭建项目只需要用Electron作中转打开在线的网址还是说你要把页面写在Electron项目里面,Electron可以集成到vue,react等框架 具体可以自行百度 下面只讲搭建Electron单项目,来连接
- 安装 electron
npm install -g electron
electron-forge 搭建一个 electron 项 目
electron-forge 相当于 electron 的一个脚手架,可以让我们更方便的创建、运行、打包 electron 项目。
npm install -g electron-forge
electron-forge init my-new-app
cd my-new-app
npm start
至此项目跑起来了 嫌麻烦可以直接克隆官方demo库
2. Electron中使用WebSocket 通信
- main.js:程序入口文件 我们直接写在主进程中
先创建一个浏览器窗口
const {app,BrowserWindow} = require('electron')
const path = require('path')
let mainWindow
function createWindow() {
let displays = electron.screen.getAllDisplays()
let externalDisplay = displays.find((display) => {
return display.bounds.x !== 0 || display.bounds.y !== 0
})
mainWindow = new BrowserWindow({
fullscreen: false,
x: externalDisplay.bounds.x + 500,//
y: externalDisplay.bounds.y + 50,
width: 800,
height: 740,
title:app.getName(),
frame: false ,//无边框窗体
autoHideMenuBar:true,//可以使用户在打开软件时隐藏菜单栏,但是如果用户按下alt按键,菜单栏又会弹出来
alwaysOnTop:true,//窗口是否永远在别的窗口上面
webPreferences: {
//解决electron require未定义,以下两项
//是否注入nodeapi
nodeIntegration: true,//nodeIntegration设为false页面就不能使用nodejs和Electron APIs
contextIsolation: false,
//渲染进程是否启用remote模块
enableRemoteModule: true,//在渲染进程中使用主进程中的模块方法时,可以使用Electron Remote解决在渲染和主进程间的通讯,这么看 remote 模块可以说是非常好用啦,渲染进程就不用显式通过 ipcRenderer / ipcMain 与主进程通信。除此之外,可以通过 remote.getGlobal 获取主进程中 的全局变量, 通过 remote.process 拿到主进程的 process 对象信息
preload: path.join(__dirname, 'preload.js')
}
})
// 窗口 不在任务栏显示 true 表示不显示,false 表示显示。
mainWindow.setSkipTaskbar(false)
//启动时加载 index.html页面.
mainWindow.loadFile('./index.html')
//打开页面调试工具:DevTools.
mainWindow.webContents.openDevTools()
// 永久隐藏菜单栏
mainWindow.setMenu(null);
mainWindow.on('closed', () => {
mainWindow = null
})
}
mainWindow.loadFile('./index.html') 是打开当前index.html文件作为渲染进程的界面如果是用在线地址应该用mainWindow.loadURL("http://************");的方式 代替
上面跑起来了项目并且也有了窗体打开在想要的位置第二屏,接下来是Node.js ws 模块 使用
引入:
const WebSocketServer = require('ws').Server;
创建:
var Socket =new WebSocketServer({port: 10000});//10000为端口号
Socket.on监听connection连接事件 在里面每一个socke客户端连接都会触发 接下来就是记录进来的连接
Socket.on('connection', (ws,req) => {
});
例如我要A端向B端发消息这时候 A,B端都连接到这个socket服务端
let ASocket =null
Socket.on('connection', (ws,req) => {
ASocket =ws //这里是收到了连接并记录下来
//下面要建立监听 接受A端消息
ASocket.on('message', (message) => {
// 接收到消息 反馈 这里可以判断B屏是否连接进来 连进来的话应该发给B屏的
ASocket.send(JSON.stringify({type:0}))
});
});
上面是简单的例子 创建一个浏览器窗口代码可以直接使用 socket只给了一个简要使用说明 具体代码业务还需自己拿捏 如果有有什么疑问欢迎留言