关于长连接的使用

        本次项目我尝试了使用长连接,先说一下长连接的作用吧,以前我们从数据库获取数据是只有我们前端触发某一事件去发请求,后端才会返回数据,也就是说必须有人为操作才能完成这一过程,但是对于websocket长连接来说,实现了前后端牵手,使得发送请求与获取数据变成一种自动的行为,最常见的就是我们平时的聊天软件,消息的发送与接收是实时的,也许有的人会使用轮询来实现消息的实时,但是相比于长连接,轮询太过浪费资源,每个特定的时间就会发送请求,但有时数据并没有变化,再去请求岂不是一种浪费,而长连接则可以根据数据的变化去发送请求,所以长连接对于实时消息的实现是一种好方法。

        学习过程中发现,网上的教学视频都只是说这边发消息,那边接收消息,用sessionstorage暂存历史记录,但是项目中是需要保存历史记录的,所以,可以然后端写一个接口来保存历史记录,再写一个获取,然后通过以下方面进行长连接的操作:

var websocket = null;
//判断当前浏览器是否支持WebSocket
if('WebSocket' in window){
  websocket = new WebSocket("这里是后端给前端的长链接的连接");
}else{
   alert('网络错误')
}

//连接发生错误的回调方法
websocket.onerror = function(){
  alert("网络错误");
};

//连接成功建立的回调方法
websocket.onopen = function(event){
  console.log("连接成功~");
}

//接收到消息的回调方法
websocket.onmessage = function(event){
  这里是接受到新消息的处理
}

//连接关闭的回调方法
websocket.onclose = function(){
  console.log("close");
}

//监听窗口关闭事件,当窗口关闭时,主动去关闭websocket连接,
// 防止连接还没断开就关闭窗口,server端会抛异常。
window.onbeforeunload = function(){
  websocket.close();
}


//关闭连接
function closeWebSocket(){
  websocket.close();
}

以上都是基础操作,只需记住便可,接下来就说一下我实现实时消息的过程,众所周知,长连接是需要前后端配合的,后端需要进行相关的配置,给前端长连接的地址,对于前端,当用户有新消息的时候可以使用websocket.send()的方法,同时调用接口储存消息 ,websocket.send()相当于告知onmessage方法可以执行了,如果需要渲染数据,就可以在onmessage中调用接口进行操作了。

        使用websocket最重要的是前后端的配合,前端部分相对简单,但也需要前后端及时沟通,了解需求,才能发挥好他的优点。

你可能感兴趣的:(websocket,项目,数据库,前端,websocket)