PHP5와 Chrome 브라우저를 클라이언트로 사용하는 웹 소켓을 사용하고 있습니다. http://code.google.com/p/phpwebsocket/ 사이트에서 코드를 가져 왔습니다 .
나는 서버를 실행하고 클라이언트도 연결됩니다. 채팅도 할 수 있습니다. 이제 서버를 다시 시작하면 (종료하고 다시 시작하여) 클라이언트는 연결이 끊어진 정보를 얻지 만 메시지를 보낼 때 자동으로 서버에 다시 연결하지 않습니다.
이것을 달성하는 방법? 연결이 끊긴 정보를 받았을 때처럼 확인하고 JavaScript로 보내 페이지를 새로 고치거나 다시 연결해야합니까?
답변:
서버가 재부팅되면 웹 소켓 연결이 닫히고 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가 제공 한 솔루션은 완벽하게 작동하지 않습니다. 연결이 끊어진 경우 서버가 여러 개의 닫기 이벤트를 보낼 수 있기 때문입니다.
이 경우 여러 setTimout을 설정합니다. Andrew가 제공 한 솔루션은 서버가 5 초 전에 준비된 경우에만 작동 할 수 있습니다.
그런 다음 Andrew 솔루션을 기반으로 재 작업하여 창 개체에 ID를 연결하는 setInterval을 사용했습니다 (이렇게하면 "모든 곳에서"사용할 수 있음).
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
재부팅 할 때 많은 수의 클라이언트가 서버에 연결되어있는 경우. Exponential Backoff 알고리즘을 사용하여 클라이언트의 재 연결 타이밍을 관리하는 것이 좋습니다.
알고리즘은 다음과 같이 작동합니다.
참고:
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);
}
}
.....
.....