您的位置:首页 > 其它

WebSocket

2016-11-03 18:03 24 查看
简介
WebSocket是HTML5开始提供的一种浏览器与服务器间进行全双工通讯的网络技术。浏览器和服务器只需要要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。
WebSocket建立在TCP 之上,同HTTP 一样通过TCP 来传输数据,但是它和HTTP 最大不同是:
WebSocket是一种双向通信协议,在建立连接后,WebSocket服务器和 Browser/ClientAgent 都能主动的向对方发送或接收数据,就像 Socket 一样;
WebSocket需要类似 TCP的客户端和服务器端通过握手连接,连接成功后才能相互通信。
相对于传统 HTTP每次请求-应答都需要客户端与服务端建立连接的模式,WebSocket是类似 Socket的 TCP长连接的通讯模式,一旦 WebSocket连接建立后,
后续数据都以帧序列的形式传输。在客户端断开 WebSocket连接或 Server端断掉连接前,不需要客户端和服务端重新发起连接请求。
在海量并发及客户端与服务器交互负载流量大的情况下,极大的节省了网络带宽资源的消耗,有明显的性能优势,且客户端发送和接受消息是在同一个持久连接上发起,
实时性优势明显。

更多详细介绍请查看博文:
 WebSocket实战

WebSocket之实时通信
(我就不重复造轮子了)

WebSocket 服务器端代码示例


基于Tomcat7开发WebSocket服务器端代码

//使用@ServerEndpoint注解,把一个类标识为WebSocket服务器,该注解参数为服务器访问的url
@ServerEndpoint(value="/websocket/test")
public class WebSocketServer{
private static final Set<WebSocketServer> connections = new CopyOnWriteArraySet<WebSocketServer>();
private static final AtomicInteger connectionIds =new AtomicInteger(0);
public WebSocketServer() {
super();
connectionIds.getAndIncrement();
}

private Session session;

/**
* 获取客户端发送握手请求
* @paramsession
* @throwsIOException
*/
@OnOpen
public void onOpen(Session session) throws IOException{
this.session = session;
connections.add(this);
if(14 == connectionIds.intValue()){
sendMsgToAllClient();
}
System.out.println("WebSocket open from sessionId:"+session.getId());
}

/**
* 获取客户端发送的业务消息
* @parammessage
* @return
*/
@OnMessage
public String onMessage(String message){

System.out.println("WebSocket received from sessionId:"+this.session.getId()+"message:"+message);
return message;
}

/**
* 异常处理事件
* @paramt
*/
@OnError
public void onError(Throwable t){
System.out.println(t.getMessage());
}

/**
* 客户端断开连接事件
* @paramsession
* @paramreason
*/
@OnClose
public void onClose(Session session,CloseReason reason){
connections.remove(session);
System.out.println(session.getId()+"is close!");
}

/**
* 给所有连接的客户端推送消息
*/
public void sendMsgToAllClient(){
for (WebSocketServer connection : connections){
if(connection.session.isOpen()){
try {
connection.session.getBasicRemote().sendText("今日头条:春节法定节假日假期将延长至10天...");
} catch(IOException e) {
e.printStackTrace();
}
}
}
}


WebSocket 客户端代码示例


基于Google浏览器开发js端WebSocket客户端代码

<script type="text/javascript" charset="utf-8">
//w3c关于WebSocketAPI的相关规范,浏览器提供了WebSocket类型,在Firefox中为MozWebSocket
window.WebSocket = window.WebSocket || window.MozWebSocket;
$(function(){
//建立WebSocket连接
varwebSocket = new WebSocket("ws://"+window.location.host+"/carcloud/websocket/test");
//接收服务器端消息
webSocket.onmessage = function(event){
alert("received:"+ event.data +"fromserver!");
};
//错误处理事件
webSocket.onerror = function(event){
alert(event.data);
};
//给服务器端发送握手动作
webSocket.onopen = function(event){
alert("WebSocket is open");
};
//给服务器端发送消息
$("#send").click(function(){
varname = document.querySelector("input[name=name]").value;
webSocket.send(name);
});
//关闭此WebSocket客户端连接
$("#close").click(function(){
webSocket.close();
})
});
</script>

<script type="text/javascript" charset="utf-8">
//w3c关于WebSocketAPI的相关规范,浏览器提供了WebSocket类型,在Firefox中为MozWebSocket
window.WebSocket = window.WebSocket || window.MozWebSocket;
$(function(){
//建立WebSocket连接
varwebSocket = new WebSocket("ws://"+window.location.host+"/carcloud/websocket/test");
//接收服务器端消息
webSocket.onmessage = function(event){
alert("received:"+ event.data +"fromserver!");
};
//错误处理事件
webSocket.onerror = function(event){
alert(event.data);
};
//给服务器端发送握手动作
webSocket.onopen = function(event){
alert("WebSocket is open");
};
//给服务器端发送消息
$("#send").click(function(){
varname = document.querySelector("input[name=name]").value;
webSocket.send(name);
});
//关闭此WebSocket客户端连接
$("#close").click(function(){
webSocket.close();
})
});
</script>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  websocket 实时通信