Недавно WebSocket использовался при разработке апплета.Апплет предоставляет соответствующий собственный API, который отличается от использования API H5.Поэтому некоторые зрелые библиотеки классов популярного H5 сложны в использовании, и есть некоторые собственные API, дефекты, поэтому я реализовал набор механизмов повторного подключения пульса.
Соглашение, сначала кратко представим Websocket.
Введение в веб-сокеты
что такое вебсокет
WebSocket — это сетевой протокол связи. RFC6455 определяет его стандарт связи.
WebSocket — это протокол, предоставляемый HTML5 для полнодуплексной связи по одному TCP-соединению.
Зачем нужны вебсокеты
Протокол HTTP — это односторонний протокол прикладного уровня без сохранения состояния и установления соединения. Он принимает модель запрос/ответ. Запрос связи может быть инициирован только клиентом, и сервер отвечает на запрос.
Поэтому, когда мы хотим, чтобы сервер активно отправлял сообщения клиенту, HTTP не может этого сделать, мы можем использовать только опрос или длительный опрос для достижения аналогичных функций, что неэффективно и тратит ресурсы.Для решения этой проблемы родился WebSocket.
WebSocket в апплете
Мини программа WebSocket API
Мне лень тебе давать! Проверьте свой собственный веб-сайт!
Почему происходит переподключение сердцебиения
При использовании нативного WebSocket мы часто чувствуем себя нестабильно, иногда сообщение, отправленное сервером, не может быть получено клиентом, или сообщение, отправленное клиентом, не может быть получено сервером, хотя WebSocket также предоставляет методы onError и onClose, но есть часто различные неизвестные ситуации, которые приводят к отключению соединения без запуска событий Error или Close. Таким образом, фактическое соединение было разорвано, но клиент и сервер не знают об этом и все еще ждут новостей.
Итак, проблема, которую мы хотим решить, предельно ясна:
Убедитесь в состоянии соединения, сообщите клиенту и серверу, когда соединение будет отключено, а затем снова подключитесь.
код выше
После загрузки страницы мы сначала подключаем сокет
onLoad(){
this.linkSocket()
},
linkSocket(){
let that = this
wx.connectSocket({
url: app.globalData.wsUrl + 'websocket?' + this.data.taskId + '&' + this.data.userId,
success() {
console.log('连接成功')
that.initEventHandle()
}
})
},
привязать событие
Затем вызовите initEventHandle для привязки различных событий.
initEventHandle(){
let that = this
wx.onSocketMessage((res) => {
//收到消息
})
wx.onSocketOpen(()=>{
console.log('WebSocket连接打开')
})
wx.onSocketError(function (res) {
console.log('WebSocket连接打开失败')
})
wx.onSocketClose(function (res) {
console.log('WebSocket 已关闭！')
})
},
Поместите это здесь сначала, мы заполним это позже
Повторное подключение после отключения
reconnect(){
if (this.lockReconnect) return;
this.lockReconnect = true;
clearTimeout(this.timer)
if (this.data.limit<12){
this.timer = setTimeout(() => {
this.linkSocket();
this.lockReconnect = false;
}, 5000);
this.setData({
limit: this.data.limit+1
})
}
},
Мы устанавливаем блокировку и максимальное количество переподключений, чтобы избежать бесконечного переподключения.Чтобы не слишком сильно нагружать сервер, я установил повтор каждые 5 секунд и максимум 12 запросов.
Измените initEventHandle, чтобы мы могли добиться общего отключения и повторного подключения, которое вызывает ошибку.
initEventHandle(){
let that = this
wx.onSocketMessage((res) => {
//收到消息
})
wx.onSocketOpen(()=>{
console.log('WebSocket连接打开')
})
wx.onSocketError((res)=>{
console.log('WebSocket连接打开失败')
this.reconnect()
})
wx.onSocketClose((res)=> {
console.log('WebSocket 已关闭！')
this.reconnect()
})
},
Ключ приходит --- объект сердцебиения
Уважайте в первую очередь
let heartCheck = {
timeout: 10000,
timeoutObj: null,
serverTimeoutObj: null,
reset: function () {
clearTimeout(this.timeoutObj);
clearTimeout(this.serverTimeoutObj);
return this;
},
start: function () {
this.timeoutObj = setTimeout(()=> {
console.log("发送ping");
wx.sendSocketMessage({
data:"ping",
// success(){
// console.log("发送ping成功");
// }
});
this.serverTimeoutObj = setTimeout(() =>{
wx.closeSocket();
}, this.timeout);
}, this.timeout);
}
};
Тайм-аут в объекте пульса означает отправку пульса каждые 10 секунд. Объекты timeoutObj и serverTimeoutObj используются для сброса таймера. Метод reset сбрасывает таймер и начинает отправлять пульс.
Продолжайте преобразовывать наш initEventHandle
initEventHandle(){
let that = this
wx.onSocketMessage((res) => {
//收到消息
if (res.data == "pong"){
heartCheck.reset().start()
}else{
\\处理数据
}
})
wx.onSocketOpen(()=>{
console.log('WebSocket连接打开')
heartCheck.reset().start()
})
wx.onSocketError((res)=>{
console.log('WebSocket连接打开失败')
this.reconnect()
})
wx.onSocketClose((res)=> {
console.log('WebSocket 已关闭！')
this.reconnect()
})
},
При открытии соединения вызывается start для запуска сердцебиения, и каждые 10 секунд на сервер отправляется сообщение "ping". После того, как сервер получит сообщение, он ответит нам "pong", как в чате WeChat.
Ты здесь?
существует
Ты здесь?
существует
Ты здесь?
рулон
Не смотрите на это Это раздражает, по крайней мере вы можете быть уверены, что вы двое все еще друзья, или вы не знаете, заблокировал ли он вас (немного не по теме)
Если сервер не ответил "pong" в течение 10 секунд, считается, что соединение разорвано.
Вытираю, смею удалять друга, выдержу ли я нрав этого северо-восточного мужика? Я тоже тебя удалил. . . . . . . . . . . Затем быстро повторно подать заявку в качестве друга
Это агрессивный клиент, который напрямую закрывает соединение и вызывает closeSocket, но как только мы закроем наше событие onSocketClose, он снова подключится (подонок)
На этом переподключение сердцебиения завершено.
Суммировать
Повторное подключение пульса сокета может иметь аналогичную реализацию в H5, и существуют зрелые сторонние библиотеки, такие как stomp+websocket+sockjs, которые могут реализовать более полную и совместимую схему подключения к сокету, которой можно будет поделиться с вами в следующий раз (см. мое настроение).
Если вы думаете, что это нормально, пожалуйста, дайте мне большой палец вверх.
Если вы считаете, что это чепуха, пожалуйста, поставьте мне лайк и накажите меня.