|
|
@@ -0,0 +1,103 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+
|
|
|
+<html xmlns="http://www.w3.org/1999/xhtml">
|
|
|
+<head>
|
|
|
+ <meta charset="utf-8" />
|
|
|
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/8.0.7/signalr.min.js"></script>
|
|
|
+ <title></title>
|
|
|
+ <style type="text/css">
|
|
|
+ .content {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: left;
|
|
|
+ border: solid #4cff00 1px;
|
|
|
+ margin-top: 2rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .badge {
|
|
|
+ font-size: large;
|
|
|
+ font-weight: bolder;
|
|
|
+ color: aquamarine;
|
|
|
+ }
|
|
|
+
|
|
|
+ #messagesList {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+
|
|
|
+ <div class="container">
|
|
|
+ <textarea rows="3" id="text" cols="120" class="text" placeholder="输入要发送的文字信息"></textarea>
|
|
|
+ <button id="send" class="btn btn-primary">发送</button>
|
|
|
+ <div class="content">
|
|
|
+ <ul id="messagesList" class="list-group">
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <script>
|
|
|
+ window.onload = function () {
|
|
|
+ const clientid = this.prompt('请输clientid')
|
|
|
+ const data = {
|
|
|
+ clientid: clientid,
|
|
|
+ grant_type: 'check_file'
|
|
|
+ }
|
|
|
+ if (data.clientid) {
|
|
|
+ const url = `/signalr/exam?grant_type=${data.grant_type}&clientid=dedbdcf5545c6f83093883a63142687d-127.0.0.1`
|
|
|
+ const connection = new signalR.HubConnectionBuilder()
|
|
|
+ .withUrl(url)
|
|
|
+ .configureLogging(signalR.LogLevel.Information)
|
|
|
+ .build();
|
|
|
+ connection.start().then(function () {
|
|
|
+ console.log(`${data.clientid}连接成功......`);
|
|
|
+ //appendContent(`${data.scene}连接成功......`);
|
|
|
+ });
|
|
|
+ connection.on("ReceiveConnection", (message) => {
|
|
|
+ console.log('ReceiveConnection-MESSAGE', message);
|
|
|
+ appendContent(message.content);
|
|
|
+ });
|
|
|
+ connection.on("ReceiveMessage", (message) => {
|
|
|
+ console.log('ReceiveMessage-MESSAGE', message);
|
|
|
+ appendContent(message.content, message.clientid);
|
|
|
+ });
|
|
|
+ const btn = document.getElementById("send")
|
|
|
+ btn.addEventListener('click', function () {
|
|
|
+ const target = document.getElementById('text')
|
|
|
+ connection.invoke("ReceiveMessage", data.clientid, data.grant_type,target.value)
|
|
|
+ .then(_ => {
|
|
|
+ target.value = '';
|
|
|
+ })
|
|
|
+ .catch(err => console.error(err.toString()));
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ function appendContent(content, badge) {
|
|
|
+ let li = document.createElement("li");
|
|
|
+ li.className = 'list-group-item';
|
|
|
+ if (badge) {
|
|
|
+ const span = document.createElement('span');
|
|
|
+ span.className = 'badge';
|
|
|
+ span.innerText = badge + ':';
|
|
|
+ li.appendChild(span);
|
|
|
+ }
|
|
|
+ li.innerHTML += content;
|
|
|
+ document.getElementById("messagesList").appendChild(li);
|
|
|
+ }
|
|
|
+
|
|
|
+ //async function start() {
|
|
|
+ // try {
|
|
|
+ // await connection.start();
|
|
|
+ // console.log("已经连接 SignalR Connected.");
|
|
|
+ // } catch (err) {
|
|
|
+ // console.log(err);
|
|
|
+ // setTimeout(start, 5000);
|
|
|
+ // }
|
|
|
+ //};
|
|
|
+ //connection.onclose(async () => {
|
|
|
+ // await start();
|
|
|
+ //});
|
|
|
+ //start();
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+</html>
|
CrazyIter_Bin