碼上快樂

相關內容    簡體    繁體

JS通過WebSocket實現雙屏信息同步顯示

本文轉載自   查看原文   2020-08-28 10:32   899    websocket/ JS

最近項目里有個新的小需求，就是主機打開一個網頁Demo，連接的安卓設備打開同一個網頁Demo，兩個頁面是一樣的，簡單來說就是一個網頁Demo打開兩個頁面A和B，在頁面A中操作什么頁面B中就顯示什么，反之亦然。

**JS代碼**

<!DOCTYPE html>
<html>

<head>
<title>測試網頁</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery.min.js"></script>
<style>
.book-main {
padding: 20px 30px;
text-align: center;
}
.book-main .title {
font-size: 18px;
font-weight: 600;
}
.book-main .v-name {
font-size: 16px;
font-weight: 600;
padding: 10px 0 15px 0;
}
.book-main .inoculant-info-box {
font-size: 16px;
font-weight: 600;
text-align: left;
padding-left: 2em;
}
.inoculant-info-box > div {
display: inline-block;
margin-right: 50px;
}
.book-main .content {
text-align: left;
line-height: 24px;
}
.book-main .content h3 {
margin: 0;
font-size: 16px;
}
.content .con-box {
font-size: 16px;
border: 1px solid #000;
margin: 15px 0;
padding: 10px;
}
.autograph-con .name {
display: inline-block;
min-width: 120px;
border-bottom: 1px solid #000;
height: 50px;
line-height: 0;
vertical-align: bottom;
}
.autograph-con .name img {
height: 60px;
width: auto;
}
.autograph-con .date {
display: inline-block;
margin-top: 15px;
}

.footer-autograph {
margin-top: 20px;
border-top: 2px solid #0abf92;
padding-top: 20px;
}
.health-table {
width: 100%;
border: 1px solid #000;
border-collapse: collapse;
text-align: center;
}
.health-table th,
.health-table td {
border: 1px solid #000;
padding: 4px 10px;
}
.health-table tr td:first-child {
text-align: left;
}
.health-table td .radio {
display: inline-block;
width: 100%;
}
.radio .el-icon {
display: inline-block;
width: 14px;
height: 14px;
background-color: #fff;
border: 1px solid #a1a2a2;
position: relative;
margin-left: 8px;
z-index: 1;
font-size: 14px;
vertical-align: middle;
}
.radio .el-icon-check {
background-color: #409eff;
color: #fff;
border: 1px solid #409eff;
}

.propose-con {
font-size: 16px;
font-weight: 600;
padding: 8px 0 0 0;
}
.propose-con label {
margin-right: 20px;
}
.sign-wrapper {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: #fff;
z-index: 999;
}
.sign-main .sign-title {
position: absolute;
width: 80%;
height: 36px;
top: 15px;
left: 10%;
background: #32b16c;
border-radius: 18px;
color: #fff;
font-size: 20px;
line-height: 36px;
text-align: center;
}
.sign-footer {
background: #fff;
}
.remark-input {
display: inline-block;
height: 28px;
border: 1px solid #ddd;
}
</style>
</head>

<body>
<div id="mContent">
<div class="book-main book-main-health" id="healthShow">
<div class="title">XXXXXXXXXX</div>
<div class="content">
<div class="con" style="text-indent: 2em;">XXXXXXXXXXXXX</div>
<table class="health-table" id="healthTable">
</table>
<div class="con">
<div class="propose-con">
<table class="health-table">
<tr>
<th width="55%">情況</th>
<th width="25%" colspan="2">是或否</th>
<th width="20%">備注</th>
</tr>
<tr>
<td>1.XXXXX？ </td>
<td>
<label class="radio"><span>是</span>
<input type="radio" name="radio1" id="radio_1_1" value="1" onchange="healthAnswer()">
</label>
</td>
<td>
<label class="radio"><span>否</span>
<input type="radio" name="radio1" id="radio_1_2" value="0" onchange="healthAnswer()">
</label>
</td>
<td><input type="text" class="remark-input" id="text_1" onchange="healthAnswer()"></td>
</tr>
<tr>
<td>2.XXXXXXXXXX？ </td>
<td>
<label class="radio"><span>是</span>
<input type="radio" name="radio2" value="1" id="radio_2_1" onchange="healthAnswer()">
</label>
</td>
<td>
<label class="radio"><span>否</span>
<input type="radio" name="radio2" value="0" id="radio_2_2" onchange="healthAnswer()">
</label>
</td>
<td><input type="text" class="remark-input" id="text_2" onchange="healthAnswer()"></td>
</tr>
<tr>
<td>3.XXXXX？</td>
<td>
<label class="radio"><span>是</span>
<input type="radio" name="radio3" value="1" id="radio_3_1" onchange="healthAnswer()">
</label>
</td>
<td>
<label class="radio"><span>否</span>
<input type="radio" name="radio3" value="0" id="radio_3_2" onchange="healthAnswer()">
</label>
</td>
<td><input type="text" class="remark-input" id="text_3" onchange="healthAnswer()"></td>
</tr>
<tr>
<td>4.XXXXXXXXXX？</td>
<td>
<label class="radio"><span>是</span>
<input type="radio" name="radio4" id="radio_4_1" value="1" onchange="healthAnswer()">
</label>
</td>
<td>
<label class="radio"><span>否</span>
<input type="radio" name="radio4" id="radio_4_2" value="0" onchange="healthAnswer()">
</label>
</td>
<td><input type="text" class="remark-input" id="text_4" onchange="healthAnswer()"></td>
</tr>
<tr>
<td>5.XXXXXXXXXX? </td>
<td>
<label class="radio"><span>是</span>
<input type="radio" name="radio5" id="radio_5_1" value="1" onchange="healthAnswer()">
</label>
</td>
<td>
<label class="radio"><span>否</span>
<input type="radio" name="radio5" id="radio_5_2" value="0" onchange="healthAnswer()">
</label>
</td>
<td><input type="text" class="remark-input" id="text_5" onchange="healthAnswer()"></td>
</tr>
<tr>
<td>6.XXXXXXXXXX？ </td>
<td>
<label class="radio"><span>是</span>
<input type="radio" name="radio6" id="radio_6_1" value="1" onchange="healthAnswer()">
</label>
</td>
<td>
<label class="radio"><span>否</span>
<input type="radio" name="radio6" id="radio_6_2" value="0" onchange="healthAnswer()">
</label>
</td>
<td><input type="text" class="remark-input" id="text_6" onchange="healthAnswer()"></td>
</tr>
<tr>
<td>7.XXXXXXXXXX？ </td>
<td>
<label class="radio"><span>是</span>
<input type="radio" name="radio7" id="radio_7_1" value="1" onchange="healthAnswer()">
</label>
</td>
<td>
<label class="radio"><span>否</span>
<input type="radio" name="radio7" id="radio_7_2" value="0" onchange="healthAnswer()">
</label>
</td>
<td><input type="text" class="remark-input" id="text_7" onchange="healthAnswer()"></td>
</tr>
<tr>
<td>8.XXXXXXXXXX？ </td>
<td>
<label class="radio"><span>是</span>
<input type="radio" name="radio8" id="radio_8_1" value="1" onchange="healthAnswer()">
</label>
</td>
<td>
<label class="radio"><span>否</span>
<input type="radio" name="radio8" id="radio_8_2" value="0" onchange="healthAnswer()">
</label>
</td>
<td><input type="text" class="remark-input" id="text_8" onchange="healthAnswer()"></td>
</tr>
<tr>
<td>9.XXXXXXXXXX？ </td>
<td>
<label class="radio"><span>是</span>
<input type="radio" name="radio9" id="radio_9_1" value="1" onchange="healthAnswer()">
</label>
</td>
<td>
<label class="radio"><span>否</span>
<input type="radio" name="radio9" id="radio_9_2" value="0" onchange="healthAnswer()">
</label>
</td>
<td><input type="text" class="remark-input" id="text_9" onchange="healthAnswer()"></td>
</tr>
<tr>
<td>10.XXXXXXXXXX？ </td>
<td>
<label class="radio"><span>是</span>
<input type="radio" name="radio10" id="radio_10_1" value="1" onchange="healthAnswer()">
</label>
</td>
<td>
<label class="radio"><span>否</span>
<input type="radio" name="radio10" id="radio_10_2" value="0" onchange="healthAnswer()">
</label>
</td>
<td><input type="text" class="remark-input" id="text_10" onchange="healthAnswer()"></td>
</tr>
</table>
</div>
<div class="autograph-con clear">
<div class="fl">
甲方（簽名）：
<span class="name sign-name">
<img src="" class="inquirySignature" />
</span>
<!-- <span class="fingerprint-show">
<img src="./images/FingerPrintBase64.png" class="fingerprint-img"/>
</span> -->
</div>
<div class="fr">
日期：
<span class="date"></span>
</div>
</div>
<div class="bold-con">XXXXXXXXXX。</div>
<div class="autograph-con clear">
<div class="fl">
乙方（簽名）：
<span class="name">
<img src="" class="img_sign_doctor" />
</span>
</div>
<div class="fr">
日期：
<span class="date"></span>
</div>
</div>
</div>
<div style="text-align: right; margin-top: 10px">XXXXXXXXXX</div>
</div>
</div>

</div>
<div class="el-row" style="text-align: center;">
<button type="button" class="el-button el-button-success" onClick="send()"><span>發送頁面</span></button>
<button type="button" class="el-button el-button-success"><span>XXX</span></button>
<button type="button" class="el-button el-button-success"><span>提交</span></button>
</div>
<script>
var radio_value = new Array(10);
var text_value = new Array(10);
var webSocket;
webSocket = new WebSocket('ws://localhost:12580');
console.log("連接成功");
webSocket.onerror = function(event) {
alert("連接錯誤");
};

webSocket.onopen = function(event) {
//alert("open"+event.data);
//console.log(event);

};

webSocket.onclose = function(event) {
alert("服務不存在或者被關閉");
//onClose(event);

};

webSocket.onmessage = function(event) {

var GetMsg = event.data;
alert(GetMsg);    

var Jobj = JSON.parse(GetMsg);
console.log("JSON.parse解析GetMsg",Jobj);    
//$("#fin").attr('src',"data:obj" + obj);

var aaa = Jobj.type;
var bbb = Jobj.UserJson;
var Tobj = JSON.parse(bbb);
var Hobj = Tobj.Info;
var Mobj = Hobj.healthInquiries;

Object.keys(Mobj).forEach(function(key, value){    
console.log(key,":",Mobj[key].answer); 
console.log(key,":",Mobj[key].remark);
});


for(var i=0 ; i < Mobj.length ; i++)    
{
var GetID = Mobj[i].id;
var remarkValue = Mobj[i].remark;
var answerValue = Mobj[i].answer;

if(GetID == 858)
{
document.getElementById("text_1").value = remarkValue;    
if(answerValue == "1"){
radio_1_1.checked = true;
radio_1_2.checked = false;
}else if(answerValue == "0"){
radio_1_2.checked=true;
radio_1_1.checked = false;
}else if(answerValue == 'null'){
radio_1_1.checked = false;
radio_1_2.checked = false;
}
continue;
}
else if(GetID == 859)
{
document.getElementById("text_2").value = remarkValue;
if(answerValue == "1"){
radio_2_1.checked = true;
radio_2_2.checked = false;
}else if(answerValue == "0"){
radio_2_2.checked=true;
radio_2_1.checked = false;
}else if(answerValue == 'null'){
radio_2_1.checked = false;
radio_2_2.checked = false;
}
continue;
}
else if(GetID == 860)
{
document.getElementById("text_3").value = remarkValue;
if(answerValue == "1"){
radio_3_1.checked = true;
radio_3_2.checked = false;
}else if(answerValue == "0"){
radio_3_2.checked=true;
radio_3_1.checked = false;
}else if(answerValue == 'null'){
radio_3_1.checked = false;
radio_3_2.checked = false;
}
continue;    
}else if(GetID == 861)
{
document.getElementById("text_4").value = remarkValue;
if(answerValue == "1"){
radio_4_1.checked = true;
radio_4_2.checked = false;
}else if(answerValue == "0"){
radio_4_2.checked=true;
radio_4_1.checked = false;
}else if(answerValue == 'null'){
radio_4_1.checked = false;
radio_4_2.checked = false;
}
continue;    
}else if(GetID == 862)
{
document.getElementById("text_5").value = remarkValue;
if(answerValue == "1"){
radio_5_1.checked = true;
radio_5_2.checked = false;
}else if(answerValue == "0"){
radio_5_2.checked=true;
radio_5_1.checked = false;
}else if(answerValue == 'null'){
radio_5_1.checked = false;
radio_5_2.checked = false;
}
continue;
}else if(GetID == 863)
{
document.getElementById("text_6").value = remarkValue;
if(answerValue == "1"){
radio_6_1.checked = true;
radio_6_2.checked = false;
}else if(answerValue == "0"){
radio_6_2.checked=true;
radio_6_1.checked = false;
}else if(answerValue == 'null'){
radio_6_1.checked = false;
radio_6_2.checked = false;
}
continue;
}else if(GetID == 864)
{
document.getElementById("text_7").value = remarkValue;
if(answerValue == "1"){
radio_7_1.checked = true;
radio_7_2.checked = false;
}else if(answerValue == "0"){
radio_7_2.checked=true;
radio_7_1.checked = false;
}else if(answerValue == 'null'){
radio_7_1.checked = false;
radio_7_2.checked = false;
}
continue;
}else if(GetID == 865)
{
document.getElementById("text_8").value = remarkValue;
if(answerValue == "1"){
radio_8_1.checked = true;
radio_8_2.checked = false;
}else if(answerValue == "0"){
radio_8_2.checked=true;
radio_8_1.checked = false;
}else if(answerValue == 'null'){
radio_8_1.checked = false;
radio_8_2.checked = false;
}
continue;
}else if(GetID == 866)
{
document.getElementById("text_9").value = remarkValue;
if(answerValue == "1"){
radio_9_1.checked = true;
radio_9_2.checked = false;
}else if(answerValue == "0"){
radio_9_2.checked=true;
radio_9_1.checked = false;
}else if(answerValue == 'null'){
radio_9_1.checked = false;
radio_9_2.checked = false;
}
continue;
}else if(GetID == 867)
{
document.getElementById("text_10").value = remarkValue;
if(answerValue == "1"){
radio_10_1.checked = true;
radio_10_2.checked = false;
}else if(answerValue == "0"){
radio_10_2.checked=true;
radio_10_1.checked = false;
}else if(answerValue == 'null'){
radio_10_1.checked = false;
radio_10_2.checked = false;
}
return;
}
}

//onMessage(event)
};
function send() {
// 捷宇發送到設備櫃外清的方法 
var actions = {
"Info": {
"healthShow": true,
"healthInquiries": [{
"id": 858,
"inquiryId": 1,
"inquiryContent": "XXXXXXXXXX？ ",
"answer": radio_value[0],
"remark": text_value[0],
"markType": 0,
"markOptions": null
}, {
"id": 859,
"inquiryId": 2,
"inquiryContent": "XXXXXXXXXX？ ",
"answer": radio_value[1],
"remark": text_value[1],
"markType": 0,
"markOptions": null
}, {
"id": 860,
"inquiryId": 3,
"inquiryContent": "XXXXXXXXXX？ ",
"answer": radio_value[2],
"remark": text_value[2],
"markType": 0,
"markOptions": null
}, {
"id": 861,
"inquiryId": 4,
"inquiryContent": "XXXXXXXXXX？ ",
"answer": radio_value[3],
"remark": text_value[3],
"markType": 0,
"markOptions": null
}, {
"id": 862,
"inquiryId": 5,
"inquiryContent": "XXXXXXXXXX? ",
"answer": radio_value[4],
"remark": text_value[4],
"markType": 0,
"markOptions": null
}, {
"id": 863,
"inquiryId": 6,
"inquiryContent": "XXXXXXXXXX？ ",
"answer": radio_value[5],
"remark": text_value[5],
"markType": 0,
"markOptions": null
}, {
"id": 864,
"inquiryId": 7,
"inquiryContent": "XXXXXXXXXX？ ",
"answer": radio_value[6],
"remark": text_value[6],
"markType": 0,
"markOptions": null
}, {
"id": 865,
"inquiryId": 8,
"inquiryContent": "XXXXXXXXXX？ ",
"answer": radio_value[7],
"remark": text_value[7],
"markType": 0,
"markOptions": null
}, {
"id": 866,
"inquiryId": 9,
"inquiryContent": "XXXXXXXXXX？ ",
"answer": radio_value[8],
"remark": text_value[8],
"markType": 1,
"markOptions": null
}, {
"id": 867,
"inquiryId": 10,
"inquiryContent": "XXXXXXXXXX？ ",
"answer": radio_value[9],
"remark": text_value[9],
"markType": 0,
"markOptions": null
}],
"vaccineInfoList": [{
"id": 3,
"vaccineCode": "0311",
"vaccineName": "XXXXXXXXXX"
}, {
"id": 4,
"vaccineCode": "0303",
"vaccineName": "XXXXXXXXXX"
}],
"adviceType": null,
"adviceVaccineInfoId": null,
"inquirySignature": null,
"signatureWorker": null,
"currentDate": "2020年08月13日"
},
"FileName": "test1.html", 
"Location": "0,1,215,220", 
"IsOpenRecored": 1, 
"IsSnap": 1 ,
}


var UserJson = JSON.stringify(actions);
DoGWQ_StartFormExchange(UserJson);
}


function DoGWQ_StartFormExchange(UserJson) {
var json = {};
json.type = 117;
json.UserJson = UserJson;
var jsonStr = JSON.stringify(json);
webSocket.send(jsonStr);
}

function healthAnswer() {
var times = 0;
for(var i = '1' ; i <= '10' ; i++)
{
radio_value[times] = $('input[name="radio'+i+'"]:checked').val();
if(radio_value[times] == null)
radio_value[times] = 'null';
times++;
}

times = 0;
for(var i = '1'; i <= '10'; i++)
{
var temp = "text_" + i;
text_value[times] = document.getElementById("text_" + i).value;
if(text_value[times] == null)
text_value[times] = 'null';
times++;    
}
send();
}

</script>
</body>

</html>

 

用JS寫了整個頁面，有單選框和文本框。

**效果展示**
整個頁面大致就是下面這個樣子了：

 

 

 

點擊第一個頁面，第二個頁面收到信息並解析：

 

 

 

 


文本框再測試一下：

 

 

 

 

 



完美，哈哈哈哈哈！


**注意**

一切的實現離不開一個完美的服務，這里我就不貼了，告訴你們自己的后端大兄弟讓他幫你搞定，這里只提供前端頁面哈！

**備注**

今天剛注冊，第一篇博文，哈哈哈，不足之處多多海涵，啦啦啦！
轉載注明出處，應該沒人轉吧，😂


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 [ubuntu]如何實現雙屏 ｜分屏顯示 [PyQt]PyQt5獲取顯示屏信息以及雙屏顯示實現 【linux基礎】ubuntu實現雙屏顯示 Unity 實現雙屏顯示或多個屏幕顯示 如何使用irealtime.js實現一個基於websocket的同步畫板 ubuntu系統使用xrandr實現雙屏幕顯示 Ubuntu 雙屏顯示設置 關於websocket的代碼，實現發送信息和監聽信息（前端 后端（node.js）） deepin雙屏實現方式 利用websocket實現手機掃碼登陸后，同步登陸信息到web端頁面
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM