webSocket前后端连接实例
⽂章⽬录
简介
传统的⽹络通信⼀般使⽤的是HTTP协议，它是⼀种⽆状态的、⽆连接的、单向的应⽤层协议。通信请求只能由客户端发起，服务端对请求做出应答处理。它是单向的，也就导致⽆法实现服务器主动向客户端发起消息。同时，它也是⼀次性的，即每个请求响应后，连接就结束了。要想继续与服务端对话，就需要重新发送请求。
但有些时候，我们是需要前后端保持长久的、双向的联系，前端实时获取后端推送过来的信息，⽽不是⾃⼰去发送⼀个个的请求来获取。这时，webSocket就应运⽽⽣了。
webSocket：实现了浏览器与服务器全双⼯通信(full-duplex)。只需要建⽴⼀次连接，就可以⼀直保持连接状态，并且前后端可以互相通信，不再是单向的了。
简单使⽤
webSocket使⽤起来其实很简单，下⾯简单介绍⼀下：
前端：调⽤websocket⽅法进⾏连接和各种状态下的通信：
new WebSocket("ws://localhost:/websocket");
其中 /websocket 是后台定义的
其余的各种⽅法，看下⾯例⼦即可
后端：定义⼀个websocket服务端
@ServerEndpoint("/websocket") public class WebSocketTest {}
@ServerEndpoint 注解是⼀个类层次的注解，将⽬前的类定义成⼀个websocket服务器端,
注解的值即为访问的URL地址，即前端 ws://localhost:/websocket 中的 /websocket
其余对应的⽅法，看下⾯例⼦即可
【前端】主要js
var websocket =null;
/
/判断当前浏览器是否⽀持WebSocket，是则创建WebSocket
if('WebSocket'in window){
websocket =new WebSocket("ws://localhost:[port]/websocket");
}else{
alert('当前浏览器 Not support websocket')
}
//连接发⽣错误的回调⽅法
console.log("WebSocket连接发⽣错误");前端websocket怎么用
};
//连接成功建⽴的回调⽅法
console.log("WebSocket连接成功");
}
//接收到消息的回调⽅法
console.log(event.data);
}
//连接关闭的回调⽅法
console.log("WebSocket连接关闭");
}
/
/关闭WebSocket连接
function closeWebSocket(){
websocket.close();
}
//发送消息
function send(){
var message = ElementById('text').value;
websocket.send(message);
}
//如果websocket连接还没断开就关闭了窗⼝，后台server端会抛异常。//所以增加监听窗⼝关闭事件，当窗⼝关闭时，主动去关闭websocket连接beforeunload=function(){
closeWebSocket();
}
【后端】主要代码：
/**
* @ServerEndpoint 注解是⼀个类层次的注解，它的功能主要是将⽬前的类定义成⼀个websocket服务器端, * 注解的值[/websocket]即为客户端webSocket连接的url地址
*/
@ServerEndpoint("/websocket")
public class WebSocketTest {
/**
* 连接建⽴成功调⽤的⽅法
* @param session 客户端的连接会话
*/
@OnOpen
public void onOpen(Session session){
System.out.println("连接开始!");
}
/**
* 连接关闭调⽤的⽅法
*/
@OnClose
public void onClose(){
System.out.println("连接关闭！");
}
/
**
* 收到客户端消息后调⽤的⽅法
* @param message 客户端发送过来的消息
* @param session 可选的参数
*/
@OnMessage
public void onMessage(String message, Session session){
System.out.println("来⾃客户端的消息:"+ message);
//发送消息回去
//AsyncRemote().sendText(message);
}
/**
* 发⽣错误时调⽤
* @param session
* @param error
*/
@OnError
public void onError(Session session, Throwable error){
System.out.println("发⽣错误");
error.printStackTrace();
}
}
相关⼯具
WebSocketd：开源的实时监控服务器
github地址： github/joewalnes/websocketd
概念
1、轮询：
客户端定时向服务器发送Ajax请求，服务器接到请求后马上返回响应信息并关闭连接。
优点：后端程序编写⽐较容易。
缺点：请求中有⼤半是⽆⽤，浪费带宽和服务器资源。
实例：适于⼩型应⽤。
2、长轮询：
客户端向服务器发送Ajax请求，服务器接到请求后hold住连接，直到有新消息才返回响应信息并关闭连接，客户端处理完响应信息后再向服务器发送新的请求。
优点：在⽆消息的情况下不会频繁的请求，耗费资⼩。
缺点：服务器hold连接会消耗资源，返回数据顺序⽆保证，难于管理维护。 Comet异步的ashx。
实例：WebQQ、Hi⽹页版、Facebook IM。
3、长连接：
在页⾯⾥嵌⼊⼀个隐蔵iframe，将这个隐蔵iframe的src属性设为对⼀个长连接的请求或是采⽤xhr请求，服务器端就能源源不断地往客户端输⼊数据。
优点：消息即时到达，不发⽆⽤请求；管理起来也相对便。
缺点：服务器维护⼀个长连接会增加开销。
实例：Gmail聊天
4、Flash Socket：
在页⾯中内嵌⼊⼀个使⽤了Socket类的 Flash 程序JavaScript通过调⽤此Flash程序提供的Socket接⼝与服务器端的Socket接⼝进⾏通信，JavaScript在收到服务器端传送的信息后控制页⾯的显⽰。
优点：实现真正的即时通信，⽽不是伪即时。
缺点：客户端必须安装Flash插件；⾮HTTP协议，⽆法⾃动穿越防⽕墙。
实例：⽹络互动游戏。
5、Websocket：
WebSocket是HTML5开始提供的⼀种浏览器与服务器间进⾏全双⼯通讯的⽹络技术。依靠这种技术可以实现客户端和服务器端的长连接，双向实时通信。
特点：
事件驱动
异步
使⽤ws或者wss协议的客户端socket
能够实现真正意义上的推送功能
缺点：少部分浏览器不⽀持，浏览器⽀持的程度与⽅式有区别。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论