PHP5とChromeブラウザをクライアントとして使用して、Webソケットを使用しています。サイトhttp://code.google.com/p/phpwebsocket/からコードを取得しました。
サーバーを実行すると、クライアントも接続されます。チャットもできます。これで、サーバーを再起動すると（サーバーを強制終了して再起動すると）、クライアントは切断された情報を取得しますが、メッセージを送信してもサーバーに自動的に再接続しません。
これを達成する方法は？切断された情報を取得したときのように、それをチェックしてJavaScriptに送信してページを更新するか、再接続する必要がありますか？
回答:
サーバーが再起動すると、Webソケット接続が閉じられるため、JavaScript oncloseイベントがトリガーされます。5秒ごとに再接続を試みる例を次に示します。
function start(websocketServerLocation){
ws = new WebSocket(websocketServerLocation);
ws.onmessage = function(evt) { alert('message received'); };
ws.onclose = function(){
// Try to reconnect in 5 seconds
setTimeout(function(){start(websocketServerLocation)}, 5000);
};
}
start戻ることなく、再帰的に呼び出すためです。
Andrewによって提供されたソリューションは、接続が失われた場合にサーバーがいくつかのcloseイベントを送信する可能性があるため、完全には機能していません。
その場合、いくつかのsetTimoutを設定します。アンドリューによって与えられた解決策は、サーバーが5秒前に準備ができている場合にのみ機能します。
次に、Andrewソリューションに基づいて、私はsetIntervalを使用してIDをウィンドウオブジェクトにアタッチしました（このようにして、「どこでも」使用できます）。
var timerID=0;
var socket;
/* Initiate what has to be done */
socket.onopen=function(event){
/* As what was before */
if(window.timerID){ /* a setInterval has been fired */
window.clearInterval(window.timerID);
window.timerID=0;
}
/* ... */
}
socket.onclose=function(event){
/* ... */
if(!window.timerID){ /* Avoid firing a new setInterval, after one has been done */
window.timerID=setInterval(function(){start(websocketServerLocation)}, 5000);
}
/* That way, setInterval will be fired only once after losing connection */
/* ... */
}
setTimeoutそれらに「グローバルタイマーID」のアイデアを適用すれば、引き続き使用できます;）
oncloseイベントが再度発生します。
GitHubは、WebSocket APIを装飾する小さなJavaScriptライブラリをホストし、接続が切断された場合に自動的に再接続するWebSocket接続を提供します。
gzip圧縮された縮小ライブラリは600バイト未満です。
公式リポジトリはここにあります：
https://github.com/joewalnes/reconnecting-websocket
再起動時に多数のクライアントがサーバーに接続されている場合。指数バックオフアルゴリズムを使用して、クライアントの再接続タイミングを管理することは価値があります。
アルゴリズムは次のように機能します。
参照：
http://blog.johnryding.com/post/78544969349/how-to-reconnect-web-sockets-in-a-realtime-web-app
ReconnectingWebSocketは、このアルゴリズムを使用して再接続を処理しません。
私はしばらくの間、純粋なバニラJavaScriptにこのパターンを使用しており、他の回答よりもいくつかのケースをサポートしています。
document.addEventListener("DOMContentLoaded", function() {
'use strict';
var ws = null;
function start(){
ws = new WebSocket("ws://localhost/");
ws.onopen = function(){
console.log('connected!');
};
ws.onmessage = function(e){
console.log(e.data);
};
ws.onclose = function(){
console.log('closed!');
//reconnect now
check();
};
}
function check(){
if(!ws || ws.readyState == 3) start();
}
start();
setInterval(check, 5000);
});
これは、サーバーが接続を閉じるとすぐに再試行し、接続もチェックして、5秒ごとに接続が確立されていることを確認します。
そのため、これが実行されたとき、またはoncloseイベントの時点でサーバーが起動していない場合でも、オンラインに戻ると、接続はまだ戻ってきます。
注：このスクリプトを使用しても、接続を開こうとするのを止めることはできません...しかし、それがあなたの望みだと思いますか？
以下は100％機能する私のプロジェクトで使用したコードです。
var name = sessionStorage.getItem（ 'name'）;
wsUri = "ws://localhost:8080";
var websocket;
$(function() {
init();
$("#chat_text_box").on("keypress", function(e) {
if (e.keyCode == 13) { //For Enter Button
e.preventDefault();
var mymessage = $('#chat_text_box').val();
if(mymessage){
var msg = { type: 'chat_text', data : { name:name, msg:mymessage } };
console.log(msg);
websocket.send(JSON.stringify(msg));
$('#chat_text_box').val('');
}
return false;
}
});
});
function init() {
websocket = new WebSocket(wsUri);
websocket.onopen = function(ev) { /*connection is open */ }
websocket.onmessage = function(ev) {
var data = JSON.parse(ev.data); //PHP sends Json data
var type = data.type;//alert(JSON.stringify(data));
switch(type) {
case "chat_text":
var text = "<div><span class='user'>"+data.data.sender_name+" : </span><span class='msg'>"+data.data.msg+"</span></div>";
$('#chat-messages').append(text);
break;
default:
break;
}
};
websocket.onerror = function(ev){};
websocket.onclose = function(ev) { init(); };
}
コメントできませんが、次のとおりです。
var socket;
const socketMessageListener = (event) => {
console.log(event.data);
};
const socketOpenListener = (event) => {
console.log('Connected');
socket.send('hello');
};
const socketCloseListener = (event) => {
if (socket) {
console.error('Disconnected.');
}
socket = new WebSocket('ws://localhost:8080');
socket.addEventListener('open', socketOpenListener);
socket.addEventListener('message', socketMessageListener);
socket.addEventListener('close', socketCloseListener);
};
socketCloseListener();
// for testing
setTimeout(()=>{
socket.close();
},5000);
プラスhttps://www.npmjs.com/package/backはすでに十分です:)
function wsConnection(url){
var ws = new WebSocket(url);
var s = (l)=>console.log(l);
ws.onopen = m=>s(" CONNECTED")
ws.onmessage = m=>s(" RECEIVED: "+JSON.parse(m.data))
ws.onerror = e=>s(" ERROR")
ws.onclose = e=>{
s(" CONNECTION CLOSED");
setTimeout((function() {
var ws2 = new WebSocket(ws.url);
ws2.onopen=ws.onopen;
ws2.onmessage = ws.onmessage;
ws2.onclose = ws.onclose;
ws2.onerror = ws.onerror;
ws = ws2
}
).bind(this), 5000)
}
var f = m=>ws.send(JSON.stringify(m)) || "Sent: "+m;
f.ping = ()=>ws.send(JSON.stringify("ping"));
f.close = ()=>ws.close();
return f
}
c=new wsConnection('wss://echo.websocket.org');
setTimeout(()=>c("Hello world...orld...orld..orld...d"),5000);
setTimeout(()=>c.close(),10000);
setTimeout(()=>c("I am still alive!"),20000);<pre>
This code will create a websocket which will
reconnect automatically after 5 seconds from disconnection.
An automatic disconnection is simulated after 10 seconds.最後に、次のように、vue + tsでwsを自動再接続します。
private async mounted() {
// Connect to WebSocket
const sn = "sb1234567890";
const host =
window.location.protocol == "https:"
? "wss://www.xxx.net"
: process.env.DEV_TYPE === "fullstack"
? "ws://10.0.0.14:8528"
: "ws://www.xxx.net:8528";
const wsUri = host + "/feed-home/" + sn;
await this.startWs(wsUri, sn);
// !!!Deprecated: failed to reconnect
// let ws = new WebSocket();
// console.log(ws);
// ws.onopen = async function(event) {
// console.log(event, "openEvent");
// clearInterval(that.timer);
// };
// ws.onclose = async function(event) {
// console.log(event, "close");
// that.timer = setInterval(() => {
// console.log("Heart Beat");
// ws.send("HeartBeat");
// // ws = new WebSocket("ws://10.0.0.14:8528/feed-home/" + sn);
// console.log(ws);
// }, 60000);
// };
// ws.onmessage = async function(event) {
// console.log(event, "ws");
// alert("get it!");
// await alert("please update!");
// await that.getHome(sn);
// };
}
private wsReconnected: boolean = false; // check whether WebSocket is reconnected
private async startWs(uri: string, sn: string) {
let that = this;
let ws = new WebSocket(uri);
ws.onopen = async () => {
if (that.wsReconnected) {
await that.getHome(sn); // Refresh api data after reconnected
}
ws.send("Current client version: " + window.version);
};
ws.onmessage = async evt => {
await that.getHome(sn);
that.$message({
type: "success",
message: evt.data,
showClose: true,
center: true,
duration: 20 * 1000
});
};
ws.onclose = async () => {
that.wsReconnected = true;
await that.startWs(uri, sn);
const sleep = (seconds: number) => {
return new Promise(resolve =>
setTimeout(resolve, seconds * 1000)
);
};
await sleep(10); // Try to reconnect in 10 seconds
// !!!Deprecated: Use timer will cause multiply ws connections
// if (!that.wsTimer) {
// // Try to reconnect in 10 seconds
// that.wsTimer = setInterval(async () => {
// console.log("reconnecting websocket...");
// await that.startWs(uri, sn);
// }, 10 * 1000);
// }
};
}WebSocketのクライアント側のクローズイベントにはwasCleanプロパティがあり、これは私にとって便利でした。クライアントコンピューターがスリープモードになった場合など、サーバーが予期せず停止した場合などにtrueに設定されているようです。ソケットを手動で閉じた場合はfalseに設定されます。ソケットは再び自動的に。Angular 7プロジェクトのコードの下。このコードはサービス内にあるので、どのコンポーネントからでも使用できます。
notifySocketClose(event) {
if (!event.wasClean) {
setTimeout(() => {
this.setupSocket()
}, 1000);
}
}
setupSocket() { // my function to handle opening of socket, event binding etc.
.....
.....
this.websocketConnection = this.websocketConnection ? this.websocketConnection : new WebSocket(socketUrl);
this.websocketConnection.onclose = this.notifySocketClose.bind(this);
}
}
.....
.....