码上欢乐
相关内容   简体   繁体

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