WebSocket
2015-12-16 09:19
302 查看
WebSocket protocol 是HTML5一种新的协议(protocol)。它是实现了浏览器与服务器全双工通信(full-duplex)。
现在，很多网站为了实现即时通讯(real-time)，所用的技术都是轮询(polling)。轮询是在特定的的时间间隔(time interval)（如每1秒），由浏览器对服务器发出HTTP request，然后由服务器返回最新的数据给客服端的浏览器。这种传统的HTTP request d的模式带来很明显的缺点 – 浏览器需要不断的向服务器发出请求(request)，然而HTTP request 的header是非常长的，里面包含的数据可能只是一个很小的值，这样会占用很多的带宽。
而最比较新的技术去做轮询的效果是Comet – 用了AJAX。但这种技术虽然可达到全双工通信，但依然需要发出请求(reuqest)。
在 WebSocket API，浏览器和服务器只需要要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。在此WebSocket 协议中，为我们实现即使服务带来了两大好处：
1. Header
互相沟通的Header是很小的-大概只有 2 Bytes
2. Server Push
服务器可以主动传送数据给客户端
下面实现一个简单PUSH例子如下：
服务端代码：
public class InitServlet extends HttpServlet {
/**
*
*/
private static final long serialVersionUID = 1L;
private static List<MessageInbound> socketList;
public void init(ServletConfig config) throws ServletException {
InitServlet.socketList = new ArrayList<MessageInbound>();
super.init(config);
System.out.println("Server start============");
}
public static List<MessageInbound> getSocketList() {
return InitServlet.socketList;
}
}
public class TestWebSocketServlet extends WebSocketServlet{
private static final Logger log = Logger.getLogger(TestWebSocketServlet.class);
/**
*
*/
private static final long serialVersionUID = 1L;
//存储链接的容器
private static List<WebSocketMessageInbound> connsList = new ArrayList<WebSocketMessageInbound>();
@Override
protected StreamInbound createWebSocketInbound(String subProtocol,HttpServletRequest request) {
// TODO Auto-generated method stub
return new WebSocketMessageInbound();
}
public class WebSocketMessageInbound extends MessageInbound{
@Override
protected void onClose(int status) {
// InitServlet.getSocketList().remove(this);
super.onClose(status);
log.debug("onClose");
InitServlet.getSocketList().remove(this);
}
@Override
protected void onOpen(WsOutbound outbound) {
log.debug("onOpen");
super.onOpen(outbound);
InitServlet.getSocketList().add(this);
}
@Override
protected void onBinaryMessage(ByteBuffer message) throws IOException {
// TODO Auto-generated method stub
log.debug("onBinaryMessage");
}
@Override
protected void onTextMessage(CharBuffer message) throws IOException {
// TODO Auto-generated method stub
log.debug("onTextMessage="+message);
// this.getWsOutbound().writeTextMessage(CharBuffer.wrap("===="));
// this.getWsOutbound().writeTextMessage(message);
//发送给所有链接的
for (MessageInbound messageInbound : InitServlet.getSocketList()) {
CharBuffer buffer = CharBuffer.wrap(message);
WsOutbound outbound = messageInbound.getWsOutbound();
outbound.writeTextMessage(buffer);
outbound.flush();
}
}
}
}
web.xml配置
<!-- WebSocket -->
<servlet>
<servlet-name>initServlet</servlet-name>
<servlet-class>com.demo.websocket.InitServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet>
<servlet-name>websocket</servlet-name>
<servlet-class>com.demo.websocket.TestWebSocketServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>websocket</servlet-name>
<url-pattern>/websocket</url-pattern>
</servlet-mapping>
前台代码：
<html>
<head>
<title>WebSoket Demo</title>
<script type="text/javascript">
//验证浏览器是否支持WebSocket协议
if (!window.WebSocket) {
alert("WebSocket not supported by this browser!");
}
var ws;
function display() {
//var valueLabel = document.getElementById("valueLabel");
//valueLabel.innerHTML = "";
ws=new WebSocket("ws://localhost:8082/springmvc/websocket");
//监听消息
ws.onmessage = function(event) {
//valueLabel.innerHTML+ = event.data;
log(event.data);
};
// 打开WebSocket
ws.onclose = function(event) {
//WebSocket Status:: Socket Closed
};
// 打开WebSocket
ws.onopen = function(event) {
//WebSocket Status:: Socket Open
//// 发送一个初始化消息
ws.send("Hello, Server!");
};
ws.onerror =function(event){
//WebSocket Status:: Error was reported
};
}
var log = function(s) {
if (document.readyState !== "complete") {
log.buffer.push(s);
} else {
document.getElementById("contentId").innerHTML += (s + "\n");
}
}
function sendMsg(){
var msg=document.getElementById("messageId");
//alert(msg.value);
ws.send(msg.value);
}
</script>
</head>
<body onload="display();">
<div id="valueLabel"></div>
<textarea rows="20" cols="30" id="contentId"></textarea>
<br/>
<input name="message" id="messageId"/>
<button id="sendButton" onClick="javascript:sendMsg()" >Send</button>
</body>
</html>
现在，很多网站为了实现即时通讯(real-time)，所用的技术都是轮询(polling)。轮询是在特定的的时间间隔(time interval)（如每1秒），由浏览器对服务器发出HTTP request，然后由服务器返回最新的数据给客服端的浏览器。这种传统的HTTP request d的模式带来很明显的缺点 – 浏览器需要不断的向服务器发出请求(request)，然而HTTP request 的header是非常长的，里面包含的数据可能只是一个很小的值，这样会占用很多的带宽。
而最比较新的技术去做轮询的效果是Comet – 用了AJAX。但这种技术虽然可达到全双工通信，但依然需要发出请求(reuqest)。
在 WebSocket API，浏览器和服务器只需要要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。在此WebSocket 协议中，为我们实现即使服务带来了两大好处：
1. Header
互相沟通的Header是很小的-大概只有 2 Bytes
2. Server Push
服务器可以主动传送数据给客户端
下面实现一个简单PUSH例子如下：
服务端代码：
public class InitServlet extends HttpServlet {
/**
*
*/
private static final long serialVersionUID = 1L;
private static List<MessageInbound> socketList;
public void init(ServletConfig config) throws ServletException {
InitServlet.socketList = new ArrayList<MessageInbound>();
super.init(config);
System.out.println("Server start============");
}
public static List<MessageInbound> getSocketList() {
return InitServlet.socketList;
}
}
public class TestWebSocketServlet extends WebSocketServlet{
private static final Logger log = Logger.getLogger(TestWebSocketServlet.class);
/**
*
*/
private static final long serialVersionUID = 1L;
//存储链接的容器
private static List<WebSocketMessageInbound> connsList = new ArrayList<WebSocketMessageInbound>();
@Override
protected StreamInbound createWebSocketInbound(String subProtocol,HttpServletRequest request) {
// TODO Auto-generated method stub
return new WebSocketMessageInbound();
}
public class WebSocketMessageInbound extends MessageInbound{
@Override
protected void onClose(int status) {
// InitServlet.getSocketList().remove(this);
super.onClose(status);
log.debug("onClose");
InitServlet.getSocketList().remove(this);
}
@Override
protected void onOpen(WsOutbound outbound) {
log.debug("onOpen");
super.onOpen(outbound);
InitServlet.getSocketList().add(this);
}
@Override
protected void onBinaryMessage(ByteBuffer message) throws IOException {
// TODO Auto-generated method stub
log.debug("onBinaryMessage");
}
@Override
protected void onTextMessage(CharBuffer message) throws IOException {
// TODO Auto-generated method stub
log.debug("onTextMessage="+message);
// this.getWsOutbound().writeTextMessage(CharBuffer.wrap("===="));
// this.getWsOutbound().writeTextMessage(message);
//发送给所有链接的
for (MessageInbound messageInbound : InitServlet.getSocketList()) {
CharBuffer buffer = CharBuffer.wrap(message);
WsOutbound outbound = messageInbound.getWsOutbound();
outbound.writeTextMessage(buffer);
outbound.flush();
}
}
}
}
web.xml配置
<!-- WebSocket -->
<servlet>
<servlet-name>initServlet</servlet-name>
<servlet-class>com.demo.websocket.InitServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet>
<servlet-name>websocket</servlet-name>
<servlet-class>com.demo.websocket.TestWebSocketServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>websocket</servlet-name>
<url-pattern>/websocket</url-pattern>
</servlet-mapping>
前台代码：
<html>
<head>
<title>WebSoket Demo</title>
<script type="text/javascript">
//验证浏览器是否支持WebSocket协议
if (!window.WebSocket) {
alert("WebSocket not supported by this browser!");
}
var ws;
function display() {
//var valueLabel = document.getElementById("valueLabel");
//valueLabel.innerHTML = "";
ws=new WebSocket("ws://localhost:8082/springmvc/websocket");
//监听消息
ws.onmessage = function(event) {
//valueLabel.innerHTML+ = event.data;
log(event.data);
};
// 打开WebSocket
ws.onclose = function(event) {
//WebSocket Status:: Socket Closed
};
// 打开WebSocket
ws.onopen = function(event) {
//WebSocket Status:: Socket Open
//// 发送一个初始化消息
ws.send("Hello, Server!");
};
ws.onerror =function(event){
//WebSocket Status:: Error was reported
};
}
var log = function(s) {
if (document.readyState !== "complete") {
log.buffer.push(s);
} else {
document.getElementById("contentId").innerHTML += (s + "\n");
}
}
function sendMsg(){
var msg=document.getElementById("messageId");
//alert(msg.value);
ws.send(msg.value);
}
</script>
</head>
<body onload="display();">
<div id="valueLabel"></div>
<textarea rows="20" cols="30" id="contentId"></textarea>
<br/>
<input name="message" id="messageId"/>
<button id="sendButton" onClick="javascript:sendMsg()" >Send</button>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- iOS03-UIView用户交互相关的属性和方法
- js的常用函数，自定义对象，内置对象
- 携手滴滴玩跨界，vivo将“快“玩到极致
- 位运算符
- 值得推荐的C/C++框架和库 (真的很强大)
- iOS02 UILable和UITextFiled的自定义
- 《Web全栈工程师的自我修养》读书笔记
- 图像处理算法基础（六）---sobel算子自实现与opencv对比
- MySql查询时间段的方法
- OperationDemo2
- 过一天不登QQ的生活
- iOS01 计算器
- Offending RSA key in /Users/liuhang/.ssh/known_hosts:7
- Android Studio(IntelliJ IDEA)使用笔记
- httpd-vhosts.conf配置文件理解
- Android内存优化杂谈
- mysql查询今天、昨天、7天、近30天、本月数据
- 位运算
- easyui numberbox
- 最全Pycharm教程（26）——Pycharm搜索导航之文件名、符号名搜索