Skip to content

Commit 17be120

Browse files
xinliangnotexinliangnote
committed
feature(1.2.8): 新增 websocket 模块
- import gorilla/websocket - 新增 实用工具箱->WebSocket 栏目
1 parent 77e8d58 commit 17be120

File tree

31 files changed

+848
-19
lines changed

31 files changed

+848
-19
lines changed

‎assets/bootstrap/js/bootstrap-notify/bootstrap-notify.min.js‎

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎assets/bootstrap/js/bootstrap-notify/notify.js‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
document.write('<script type="text/javascript" src="../../bootstrap/js/bootstrap-notify/bootstrap-notify.min.js"></script>');
2+
3+
function SuccessNotify(content) {
4+
$.notify({
5+
icon: "mdi mdi-alert",
6+
title: "",
7+
message: content,
8+
url: "",
9+
target: ""
10+
}, {
11+
type: "success",
12+
allow_dismiss: true,
13+
newest_on_top: false,
14+
placement: {
15+
from: "top",
16+
align: "right",
17+
},
18+
offset: {
19+
x: "20",
20+
y: "20"
21+
},
22+
spacing: "10",
23+
z_index: "1031",
24+
delay: "3000",
25+
animate: {
26+
enter: "animated fadeInDown",
27+
exit: "animated fadeOutUp"
28+
},
29+
onClosed: null,
30+
mouse_over: null
31+
});
32+
}

‎assets/templates/install/install_view.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,9 @@ <h5 class="card-title"><span class="badge badge-info">配置 · MySQL</span></h5
9898
</div>
9999
<input type="text" class="form-control" id="mysql_name" value="{{ .Config.MySQL.Write.Name }}"
100100
placeholder="请输入数据库名">
101+
<div class="input-group-append">
102+
<span class="input-group-text"><code>请确保此数据库已存在！</code></span>
103+
</div>
101104
</div>
102105

103106
<div class="input-group mb-3">

‎assets/templates/install/upgrade_view.html‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,21 @@
9595
<p>5、退出重新登录，即可以看到自己新增的模块。</p>
9696

9797
<hr/>
98+
99+
<p class="h6">
100+
<span class="badge badge-pill badge-warning">v1.2.7</span>
101+
->
102+
<span class="badge badge-pill badge-warning">v1.2.8</span>
103+
</p>
104+
105+
<p>1、源代码升级：
106+
<mark>拉取最新代码，覆盖旧版本代码即可。</mark>
107+
</p>
108+
<p>2、系统管理员->菜单管理，新增侧边栏：实用工具箱 -> WebSocket，同时添加菜单栏的功能权限。</p>
109+
<p>3、系统管理员->管理员，对管理员进行菜单授权。</p>
110+
<p>4、退出重新登录，即可以看到自己新增的模块。</p>
111+
112+
<hr/>
98113
</div>
99114
</div>
100115
</div>

‎assets/templates/tool/tool_websocket.html‎

Lines changed: 184 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,184 @@
1+
<!DOCTYPE html>
2+
<html lang="zh">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
6+
<link href="../../bootstrap/js/jquery-confirm/jquery-confirm.min.css" rel="stylesheet">
7+
<link href="../../bootstrap/css/bootstrap.min.css" rel="stylesheet">
8+
<link href="../../bootstrap/css/materialdesignicons.min.css" rel="stylesheet">
9+
<link href="../../bootstrap/css/animate.min.css" rel="stylesheet">
10+
<link href="../../bootstrap/css/style.min.css" rel="stylesheet">
11+
</head>
12+
13+
<body>
14+
<div class="container-fluid p-t-15">
15+
<div class="row">
16+
<div class="col-lg-6">
17+
<div class="card">
18+
<header class="card-header">
19+
<div class="card-title">WebSocket 示例</div>
20+
</header>
21+
<div class="card-body">
22+
23+
<ul class="lyear-timeline lyear-timeline-left timeline-content">
24+
<li class="lyear-timeline-item">
25+
<div class="lyear-timeline-item-dot">
26+
<span class="badge"></span>
27+
</div>
28+
<div class="lyear-timeline-item-content">
29+
<p class="mb-1"><strong class="connect-content"></strong></p>
30+
<p class="mb-0 connect-url"></p>
31+
<p>
32+
<time class="mb-3 connect-time"></time>
33+
</p>
34+
</div>
35+
</li>
36+
</ul>
37+
38+
</div>
39+
</div>
40+
</div>
41+
42+
<div class="col-lg-6">
43+
<div class="card">
44+
<div class="card-header">
45+
<div class="card-title">WebSocket 示例</div>
46+
</div>
47+
<div class="card-body">
48+
<ul class="nav nav-tabs">
49+
<li class="nav-item">
50+
<a class="nav-link active" data-toggle="tab" href="#send_message"
51+
aria-selected="true">发送消息</a>
52+
</li>
53+
</ul>
54+
55+
<div class="tab-content">
56+
<div class="tab-pane fade active show" id="send_message">
57+
<div class="input-group mb-3">
58+
<div class="input-group-prepend">
59+
<span class="input-group-text">消息内容</span>
60+
</div>
61+
<input type="text" class="form-control" id="message_content" placeholder="请输入消息内容">
62+
</div>
63+
64+
<button type="button" id="btnSend" class="btn btn-primary">发送</button>
65+
<button type="button" id="btnSending" class="btn btn-primary" disabled
66+
style="display: none">
67+
<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
68+
发送中...
69+
</button>
70+
</div>
71+
</div>
72+
</div>
73+
</div>
74+
</div>
75+
</div>
76+
</div>
77+
<script type="text/javascript" src="../../bootstrap/js/jquery.min.js"></script>
78+
<script type="text/javascript" src="../../bootstrap/js/popper.min.js"></script>
79+
<script type="text/javascript" src="../../bootstrap/js/bootstrap.min.js"></script>
80+
<script type="text/javascript" src="../../bootstrap/js/jquery-confirm/jquery-confirm.min.js"></script>
81+
<script type="text/javascript" src="../../bootstrap/js/httpclient/httpclient.js"></script>
82+
<script type="text/javascript" src="../../bootstrap/js/bootstrap-notify/notify.js"></script>
83+
<script type="text/javascript">
84+
$(document).ready(function () {
85+
const ws = new WebSocket("ws://127.0.0.1:9999/socket/system/message");
86+
87+
//连接打开时触发
88+
ws.onopen = function (evt) {
89+
if (evt.isTrusted) {
90+
$(".badge").addClass("badge-success");
91+
$(".connect-content").html("Socket 连接成功");
92+
$(".connect-url").html("连接地址：" + evt.currentTarget.url);
93+
$(".connect-time").html(getCSTTime());
94+
} else {
95+
$(".badge").addClass("badge-danger");
96+
$(".connect-content").html("Socket 连接失败");
97+
$(".connect-url").html("请确认连接地址是否正确");
98+
$(".connect-time").html(getCSTTime());
99+
}
100+
};
101+
102+
//接收到消息时触发
103+
ws.onmessage = function (evt) {
104+
const messageData = JSON.parse(evt.data);
105+
106+
let html = '<li class="lyear-timeline-item">';
107+
html += '<div class="lyear-timeline-item-dot"><span class="badge badge-success"></span></div>';
108+
html += '<div class="lyear-timeline-item-content">';
109+
html += '<p class="mb-1"><strong>' + messageData.username + '</strong></p>';
110+
html += '<p class="mb-0">' + messageData.message + '</p>';
111+
html += '<p><time class="mb-3">' + messageData.time + '</time></p>';
112+
html += '</div></li>';
113+
114+
$(".timeline-content").prepend(html);
115+
};
116+
117+
//连接关闭时触发
118+
ws.onclose = function (evt) {
119+
120+
let html = '<li class="lyear-timeline-item">';
121+
html += '<div class="lyear-timeline-item-dot"><span class="badge badge-muted"></span></div>';
122+
html += '<div class="lyear-timeline-item-content">';
123+
html += '<p class="mb-1"><strong>Socket 连接关闭</strong></p>';
124+
html += '<p class="mb-0">连接已关闭</p>';
125+
html += '<p><time class="mb-3">' + getCSTTime() + '</time></p>';
126+
html += '</div></li>';
127+
128+
$(".timeline-content").prepend(html);
129+
130+
};
131+
132+
function getCSTTime() {
133+
let date = new Date();
134+
let datetime = date.getFullYear() + "-" // "年"
135+
+ ((date.getMonth() + 1) > 10 ? (date.getMonth() + 1) : "0" + (date.getMonth() + 1)) + "-" // "月"
136+
+ (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " " // "日"
137+
+ (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":" // "小时"
138+
+ (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) + ":" // "分钟"
139+
+ (date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds()); // "秒"
140+
141+
return datetime;
142+
}
143+
144+
$('#btnSend').on('click', function () {
145+
const messageContent = $("#message_content").val();
146+
if (messageContent === "") {
147+
$.alert({
148+
title: '温馨提示',
149+
icon: 'mdi mdi-alert',
150+
type: 'orange',
151+
content: '请输入消息内容。',
152+
});
153+
return false;
154+
}
155+
156+
AjaxForm(
157+
"POST",
158+
"/api/tool/send_message",
159+
{message: messageContent},
160+
function () {
161+
$(this).hide();
162+
$("#btnSendLoading").show();
163+
},
164+
function (data) {
165+
$("#btnSendLoading").hide();
166+
$("#btnSend").show();
167+
168+
if (data.status === 'OK') {
169+
$("#message_content").val("");
170+
SuccessNotify("消息发送成功");
171+
}
172+
},
173+
function (response) {
174+
$("#btnSendLoading").hide();
175+
$("#btnSend").show();
176+
177+
AjaxError(response);
178+
}
179+
);
180+
});
181+
})
182+
</script>
183+
</body>
184+
</html>

‎configs/constants.go‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ package configs
22

33
const (
44
// ProjectVersion 项目版本
5-
ProjectVersion = "v1.2.7"
5+
ProjectVersion = "v1.2.8"
66

77
// ProjectName 项目名称
88
ProjectName = "go-gin-api"

0 commit comments

Comments
 (0)