なぜ私がWebSocket通信を使用するのか、誰もが疑問に思うでしょう。実際、初心者として、ajax、socket、vue.ajiosなどの方法も試しましたが、失敗しました。何が起こっているのかわかりませんでした。ホワイト猫と黒猫はネズミを捕まえることができればいい猫です。コミュニケーションが取れて機能が果たせば、とりあえず気になりませんが、原理的には後で勉強します。
私はフロントエンドのみを担当し、バックエンドサーバーは別の同僚の責任です。彼はC＃を使用してそれを記述しているので、URLテンプレートを参照します（双方が合意した方法で記述します）：https：/ /www.cnblogs.com/notyourdog/p/ 9728047.html
バックエンドがJavaまたはその他の表現を使用している場合は、サーバー上のWebSocketで表現を検索してください。
それを受け取るために彼にメッセージを送ってみてください、そうすれば私は彼が私に返すメッセージを受け取ります。
一定期間使用した後、現在の通信は正常で、異常はなく、基本的なニーズは満たされています。その他のことはよく理解されていません。
最初の接続の場合、テンプレートは次のとおりです。
//第1步 连接后端
//window.YESconnectServer();//后期修改ip方便
var wsImpl = window.WebSocket || window.MozWebSocket;
// 创建新的websocket新连接端口
window.ws = new wsImpl('ws://192.168.0.1:8888');//192.168.0.1这是后端服务器地址，本地是127.0.0.1或者localhost，这里要注意：要与服务端统一ip写法（或者服务端监听所有得，如0.0.0.0：8888），否则其他电脑无法访问。
console.log("连接中，等待连接 ..<br/>");
//没有连接上就给客户提示
document.getElementById("container").innerHTML = '<img src="img/xxx.gif" style="margin-left:80px;margin-top:50px;"/><span style="margin-left:-80px;color:red">请尝试按F5刷新页面</span>';
//第2步 当链接对象找到服务端成功对接后，提示正常打开
ws.onopen = function () {
console.log("连接成功");
//连接公共就要取消提示：visibility:hidden;
document.getElementById("container").innerHTML = '<img src="img/xxx.gif" style="margin-left:80px;margin-top:30px;visibility:hidden;" /><span style="margin-left:-90px;color:red;visibility:hidden;">等待时间久，请尝试刷新页面</span>';
// id对应刻客户本机的IP
// console.log("唯一id号："+id); //打印看看对否
// 发送数据给后端处理，这里我使用的是json
let data = {
"xxx": xx,
"xxx": xx,
"xxx": xx,
"xxx": ""
}
var sendStr = JSON.stringify(data);
// console.log("发送数据（转换后）:" + sendStr);
ws.send(sendStr);
};
//第3步 接收到服务端响应的数据时，触发事件
ws.onmessage = function (evt) {
// console.log("收到数据（还没转）:" + evt.data);
var myobj = JSON.parse(evt.data);//转对象
var myooo = JSON.parse(myobj.respData); //转对象
// console.log("收到数据（转换后2）:"+typeof myooo + myooo);
// console.log("收到得数据"+ JSON.stringify(myooo))//这就是获取后端的数据。
//需要给后端发送得json格式，根据双方得定义
let tempData =
[
{
"xxx": x,
"xxx":"xxx",
"xxx":xx,
"xxx":xx,
"xxx":xx,
"xxx":myooo
}
];
window.shuaxin(tempData);//外部布局得方法，收到数据后显示出来
};
//第4步 当服务端关闭后，定时重连操作
ws.onclose = function () {
// data.append ( '.. 网络连接失败<br/>');
console.log("Close：连接关闭");
// login();//重连
};
//第5步 当连接出现异常后，排查下连接错误原因
ws.onerror = function() {
console.log("Erro:出现错误");
// login();//重连
};上記によると、それは非常に簡単です実際には、5つのステップに分かれています：
1.//バックエンドに接続し、アドレスを入力します
2.//コンテンツをバックエンドに送信します-データ構造、jsonなど。
3 .//バックエンドから返されたコンテンツを受信し、コンテンツを処理して、ページのどこに配置するかを確認します
次の2つの手順はほとんどの場合修正されており、変更されません。つまり、サービスが切断されているか、接続が異常です。
4. //サーバーが閉じられると、通常の再接続操作
ws.onclose = function（）{ // data.append（ '..ネットワーク接続に失敗しました<br/>'）; console.log（ "Close：接続が閉じられました"）; // login（）; //再接続 };
5.//接続が異常な場合は、接続エラーの原因を確認してください
ws.onerror = function（）{ console.log（ "エラー：エラーが発生しました"）; // login（）; // Reconnect };
これは最初の通信ではありません。つまり、データの要求、ユーザーがイベントをクリックしてデータや操作データを取得するなど、コンテンツを途中で通信する必要があります。
他の場所にデータを送信する必要がある場合は、最初に送信テンプレートを作成することをお勧めします。データを頻繁に送信する必要があるため、ここではいくつかの手順に分けます。
1.テンプレートの書き込みを修正しました：テンプレートsendRequest（xxx、xxx、xxx）を送信します
//发送模板
function sendRequest(moduleType, actionType, reqData) {
// 当链接对象找到服务端成功对接后，提示正常打开
// ws.onopen = function () {
// console.log("连接成功");
// 发送数据给后端处理
let request={
"xxx": xx,
"xxxx":xx,
"xxxx": xx,
"xxx": xx
}
var sendStr = JSON.stringify(request);
console.log("发送数据模板 reqData:" + reqData+"发送数据模板sendStr:"+sendStr);
ws.send(sendStr);
}2.次に、頻繁に変更する必要がある他のjson形式は非常に柔軟です。
リクエストのコンテンツは、バックエンドと合意したjson形式で記述されています。送信テンプレートを呼び出すだけで、機能を追加、変更、削除するかどうかをバックエンドが認識できます。
//新加功能--给后端请求
function sendAdd(reqdata){ //给上面调用
var xxx= 1;//新增功能
var xxxx= 1;//群组模块
window.sendRequest(moduleType,actionType,reqdata);//调用发送模板，把参数传过去
}
//更新功能（如修改名称）--给后端请求
function sendUpdata(reqdata){ //给上面调用
var xxx= 2;//修改组名
var xxx= 2;//群组模块
window.sendRequest(moduleType,actionType,reqdata);//调用发送模板，把参数传过去
}
//删除功能--给后端请求
function sendDele(reqdata){
var xxx= 3;
var xxx= 3;
window.sendRequest(moduleType,actionType,reqdata);//调用发送模板，把参数传过去
}
//其他功能根据具体情况3.特定のコンテンツは特定のデータで書き込まれます。これは、追加または削除するコンテンツをバックエンドに通知するためのものであり、バックエンドはデータベースを操作できます。
例：削除するグループ関数をバックエンドに指示する
//----准备数据发送
let groupInfo= ID /比如告诉后端要删除某个组对应的ID，后端就知道了
//或者发送某种固定json格式
// {
// "xxx": xx,
// "xxx": 3,
// "xxx": 3,
// "xxx": ID
// }
//后端要求发送string格式，那我们就给他转换下格式
senddele=JSON.stringify(groupInfo);
console.log("要删除的数据senddele："+senddele);//打印看下我们发送的什么
window.sendDele(senddele);//调用发送的模板
//---------
window.JSRequest(); //发送后就接收，接收返回的数据并拼接，看下面步骤4上記の受信は、私がメソッドを作成したためです。
送信後、バックエンドが削除の成功のリマインダーやその他のデータなどを返すかどうかを確認します。処理する必要があります。削除された場合、ページは同期的に更新されます。
最初に受信テンプレートを作成します。受信するコンテンツが多い場合があることに注意してください。必要な部分を選択して、自分でデバッグするときに印刷することができます。
//接收模板 --使用模板有可能会出现数据混乱或者其他的bug
function JSRequest(){
//接收到服务端响应的数据时，触发事件
ws.onmessage = function (evt) {
// console.log("收到组终端（还没转）:" + evt.data);
groupobj = JSON.parse(evt.data);//转对象
groupoo = JSON.parse(groupobj.respData); //转对象
// var grouprr = groupoo.respData;
// console.log("选择返回来的信息:"+ typeof groupoo +groupoo[0].imei);
// console.log("groupoo444"+typeof groupoo[0] + groupoo[0]);
//接收信息后你要干嘛，放到表格还是显示在页面哪个位置，例如
if(groupoo .xxx=="删除成功！"){
//刷新界面，获取重新像服务端请求数据，随你
}else{
alert("可能是网络或服务器原因，删除失败，请重新选择或者刷新页面");
//由可能时某种原因导致
}
};
}最後に、このメソッドを呼び出して受信します
window.JSRequest（）; //返されたデータを受信してスプライス
最後に、たくさんのページが書かれているのに気づきましたが、相手のサーバーやローカルのアドレスが頻繁に変わるので、すべてのjsページを変更するので疲れます！
一般的なメソッドを作成するには、main.jsなどの新しい一般的なjsを作成し、すべてのHtmlがこのjsファイルを参照して共有し、各htmlページの</ body>に参照パスを追加します。
<script type = "text / javascript" src = "static / Myjs / main.js"> </ script>
main.jsにメソッドを記述しました。これは、最初のステップに戻ります。
/* 连接后端 */
function YESconnectServer(){//后期修改ip方便
var wsImpl = window.WebSocket || window.MozWebSocket;
window.ws = new wsImpl('ws://192.168.0.1:8888');
console.log("连接中，等待连接 ..<br/>");
}このように、アドレスが変更されるたびに、main.jsのアドレスが変更されます。一度変更するだけで十分であり、それほど変更する必要はありません。
最初のステップは、バックエンドに接続して次を使用することです：window.YESconnectServer（）; //後でIPを変更すると便利です
最終的なWebSocketは次のように記述されます。
//第1步 连接后端
window.YESconnectServer();//后期修改ip方便
//没有连接上就给客户提示
document.getElementById("container").innerHTML = '<img src="img/xxx.gif" style="margin-left:80px;margin-top:50px;"/><span style="margin-left:-80px;color:red">请尝试按F5刷新页面</span>';
//第2步 当链接对象找到服务端成功对接后，提示正常打开
ws.onopen = function () {
console.log("连接成功");
//连接公共就要取消提示：visibility:hidden;
document.getElementById("container").innerHTML = '<img src="img/xxx.gif" style="margin-left:80px;margin-top:30px;visibility:hidden;" /><span style="margin-left:-90px;color:red;visibility:hidden;">等待时间久，请尝试刷新页面</span>';
// 要发送的内容--发送json数据给后端处理
let data = {
"xxx": xx,
"xxx": xx,
"xxx": xx,
"xxx": ""
}
var sendStr = JSON.stringify(data);
// console.log("发送数据（转换后）:" + sendStr);
ws.send(sendStr);//给后端服务器发送
};
//第3步 接收到服务端响应的数据时，触发事件
ws.onmessage = function (evt) {
// console.log("收到数据（还没转）:" + evt.data);
var myobj = JSON.parse(evt.data);//转对象
var myooo = JSON.parse(myobj.respData); //转对象
// console.log("收到数据（转换后2）:"+typeof myooo + myooo);
// console.log("收到得数据"+ JSON.stringify(myooo))
//需要给后端发送得json格式，根据双方得定义
let tempData =
[
{
"xxx": x,
"xxx":"xxx",
"xxx":xx,
"xxx":xx,
"xxx":xx,
"xxx":myooo
}
];
window.shuaxin(tempData);//外部布局得方法，收到数据后显示出来
};
//第4步 当服务端关闭后，定时重连操作
ws.onclose = function () {
// data.append ( '.. 网络连接失败<br/>');
console.log("Close：连接关闭");
// login();//重连
};
//第5步 当连接出现异常后，排查下连接错误原因
ws.onerror = function() {
console.log("Erro:出现错误");
// login();//重连
};この通信方法は現在、小規模なフロントエンド開発に適しています。Ajaxのように一部を更新するだけでなく、すべてを置き換える可能性があります。また、リスク、電力消費、サーバーの負荷の増加、および頻繁な原因不明の切断をもたらす可能性があります。サーバー。
WebSocketの原理を理解するには、http：//www.ruanyifeng.com/blog/2017/05/websocket.htmlを参照してください。