169 lines
4.8 KiB
Plaintext
169 lines
4.8 KiB
Plaintext
40
|
||
|
||
需要使用到的框架有：
|
||
|
||
【提供和系统打交道的所有方法】
|
||
1 桌面端：electron————————集成了谷歌浏览器和node.js的一个桌面运行环境
|
||
|
||
2013 年的时候，Atom 编辑器问世，作为实现它的底层框架 Electron 也逐渐被熟知
|
||
Electron 是 GitHub 开发的一个开源框架。它允许使用 Node.js（作为后端）和 Chromium（作为前端）完成桌面 GUI 应用程序的开发。
|
||
可以用于构建具有 html、css、JAVAScript 的跨平台桌面应用程序，它通过将 Chromium 和 node.js 合同一个运行的环境中来实现这一点，应用程序可以打包到 mac、windows 和 linux 系统上。
|
||
|
||
|
||
————————进程通讯——————
|
||
|
||
主进程 main.js
|
||
|
||
|
||
渲染进程 mainWindow.loadFile('index.html')包含的所有 html 和 js 。
|
||
|
||
ipcrender渲染进程
|
||
ipcmain渲染主进程
|
||
resizable: false框架大小不可调
|
||
|
||
|
||
例："start": "electron ." 使用electron去运行"main": "main.js"这个文件、
|
||
空格. .就代表着"main": "main.js"这个文件，但一定要写main，因为main代表的是程序的主入口文件
|
||
|
||
electron-builder项目打包
|
||
"build": {
|
||
|
||
应用的唯一编号 倒序
|
||
"appId": "com.abandon.qq",
|
||
|
||
产品名称
|
||
"productName": "Abandon",
|
||
|
||
源码是否加密
|
||
"asar": false,
|
||
|
||
作者
|
||
"copyright": "Copyright © 2022 abandon",
|
||
"extends": null,
|
||
|
||
打包哪些文件
|
||
"files": [
|
||
"./*"
|
||
],
|
||
输出到哪个文件夹
|
||
"directories": {
|
||
"output": "./build"
|
||
},
|
||
windows系统打包
|
||
"win": {
|
||
图标 需要png转ico
|
||
"icon": "./logo.ico",
|
||
"target": [
|
||
"msi"
|
||
]
|
||
}
|
||
}
|
||
|
||
|
||
【实现功能交互】
|
||
2 js框架：jquery————————对原生js的封装
|
||
|
||
|
||
|
||
|
||
3 ui框架：zui
|
||
|
||
|
||
【双向通讯】
|
||
4 通讯技术：websocket
|
||
|
||
|
||
WebSocket是一种在单个TCP连接上进行全双工通信的协议。
|
||
它使得客户端和服务器之间的数据交换变得更加简单，允许 ！！ 服务端 主动向 客户端 ！！推送数据。
|
||
在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建 ！！持久性的连接 ！！，并进行双向数据传输。
|
||
握手：需要通过浏览器发出请求，之后服务器进行回应，这个过程通常称为“握手”
|
||
|
||
|
||
|
||
5 websocket的框架：socket.io
|
||
|
||
心跳，断线重连
|
||
|
||
【提供插件实现各种功能】
|
||
6 node.js的web开发框架：express
|
||
|
||
【页面布局】
|
||
html css js（jquery） 前端 fontend
|
||
后端 backend
|
||
|
||
|
||
|
||
————————通讯技术：websocket————————
|
||
|
||
例： ——index.js——
|
||
const { WebSocketServer } = require("ws");
|
||
|
||
//创建websocket连接（创建服务端，端口：8080）
|
||
const wss = new WebSocketServer({ port: 8080 });
|
||
|
||
//连接成功触发
|
||
//on'connection'监听是否连接成功
|
||
wss.on('connection', function connection(ws) {
|
||
console.log("一个客户端连接到服务器了..");
|
||
|
||
//监听消息是否接收
|
||
ws.on('message', function message(data) {
|
||
console.log('服务器接收到的消息：', data.toString());
|
||
ws.send('服务器给前端的消息');
|
||
});
|
||
});
|
||
|
||
——index.html——
|
||
<body>
|
||
<textarea name="" placeholder="输入内容" id="" cols="30" rows="10"></textarea>
|
||
<button>发送</button>
|
||
</body>
|
||
|
||
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
|
||
<script>
|
||
var ws = new WebSocket("ws://127.0.0.1:8080")
|
||
|
||
//以下三个均可省略不写，只需要一定要onmessage
|
||
// ws.onopen = function () {
|
||
// console.log("连接已经打开");
|
||
// }
|
||
|
||
// ws.onerror = function () {
|
||
// console.log("连接产生错误");
|
||
// }
|
||
|
||
// ws.onclose = function () {
|
||
// console.log("连接关闭");
|
||
// }
|
||
|
||
ws.onmessage = function (e) {
|
||
console.log("收到后端给的消息",e.data);
|
||
}
|
||
|
||
$("button").click(function (){
|
||
ws.send($("textarea").val())
|
||
console.log($("textarea").val());
|
||
})
|
||
</script>
|
||
|
||
|
||
|
||
|
||
项目实例： 登陆页面：头像 房间名 用户名 登录按钮
|
||
|
||
|
||
聊天页面：
|
||
头部 头像 群名称
|
||
|
||
内容 左：聊天记录
|
||
右：标题 在线人数（头像 用户名） 在线成员
|
||
|
||
底部 工具栏： 表情 文件传输等等
|
||
输入框：
|
||
|
||
|
||
页面跳转实现逻辑：
|
||
|
||
|
||
|