一、websocket与http长轮询
websocket属于html5 规范的一部分,提供的一种在单个 tcp 连接上进行全双工通讯的协议。允许服务端主动向客户端推送数据。在 websocket api 中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。(tomcat 8以上版本支持)
http 协议是一种无状态的、无连接的、单向的应用层协议。它采用了请求/响应模型。通信请求只能由客户端发起,服务端对请求做出应答处理。这种通信模型有一个弊端:http 协议无法实现服务器主动向客户端发起消息。
http长轮询:客户端向服务器发送(http)ajax请求,服务器接到请求后hold住连接,直到有新消息才返回响应信息并关闭连接,客户端处理完响应信息后再向服务器发送新的请求。
websocket与http长轮询的通信机制如下:
二、客户端如何使用websocket
浏览器通过 javascript 向服务器发出建立 websocket 连接的请求,连接建立以后,客户端和服务器端就可以通过 tcp 连接直接交换数据。
当你获取 web socket 连接后,你可以通过send()方法来向服务器发送数据,并通过onmessage事件来接收服务器返回的数据。
1. 创建 websocket 对象api
1
2
3
|
//第一个参数 url, 指定连接的 url。第二个参数 protocol 是可选的,指定了可接受的子协议。 api:var websocket = new websocket(url, [protocol] ); |
2. websocket 属性
以下是 websocket 对象的属性。假定我们使用了以上代码创建了 socket 对象:
属性 | 描述 |
---|---|
socket.readystate |
只读属性 readystate 表示连接状态,可以是以下值:
|
socket.bufferedamount |
只读属性 bufferedamount 已被 send() 放入正在队列中等待传输,但是还没有发出的 utf-8 文本字节数。 |
3. websocket 事件
以下是 websocket 对象的相关事件。假定我们使用了以上代码创建了 socket 对象:
事件 | 事件处理程序 | 描述 |
---|---|---|
open | socket.onopen | 连接建立时触发 |
message | socket.onmessage | 客户端接收服务端数据时触发 |
error | socket.onerror | 通信发生错误时触发 |
close | socket.onclose | 连接关闭时触发 |
4. websocket 方法
以下是 websocket 对象的相关方法。假定我们使用了以上代码创建了 socket 对象:
方法 | 描述 |
---|---|
socket.send() |
使用连接发送数据 |
socket.close() |
关闭连接 |
5. websocket 实例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
|
<%@ page language= "java" contenttype= "text/html; charset=utf-8" pageencoding= "utf-8" %> <html> <head> <script type= "text/javascript" src= "../js/jquery.min.js" ></script> <meta http-equiv= "content-type" content= "text/html; charset=utf-8" > <title>testing websocket</title> </head> <script type= "text/javascript" > var websocket; $(document).ready(function() { //var ip = window.location.host; var url = "ws://your ip/demo/ws/websocket" ; //判断当前浏览器是否支持websocket if ( 'websocket' in window) { //建立客户端websocket websocket = new websocket(url); } else { console.log( "您的浏览器不支持websocket" ); } //封装内部监听事件 function init(){ //连接发生错误的回调方法 websocket.onerror = function(event) { console.log( "websocket连接发生错误." ); }; //连接成功建立的回调方法 websocket.onopen = function(event) { console.log( "websocket连接成功." ); //心跳检测重置 heartcheck.start(); }; //接收到消息的回调方法 websocket.onmessage = function(event) { //拿到任何消息都说明当前连接是正常的 if (event.data== "&" ){ console.log( "收到心跳回复" +event.data); } else { console.log( "接收到消息=" +event.data); onmessage(event); } heartcheck.start(); }; //连接关闭的回调方法 // 断线重连 websocket.onclose = function() { console.log( "websocket连接断开" ); } //监听窗口关闭事件,当窗口关闭时,主动去关闭websocket连接,防止连接还没断开就关闭窗口,server端会抛异常。 window.onbeforeunload = function() { websocket.close(); console.log( "窗口关闭,websocket断开连接." ); } } function onmessage(event) { setmessageinnerhtml(event.data); } function posttoserver() { websocket.send(document.getelementbyid( "msg" ).value); console.log( "向服务器发送消息=" +document.getelementbyid( "msg" ).value); document.getelementbyid( "msg" ).value = "" ; } //将消息显示在网页上 function setmessageinnerhtml(innerhtml) { document.getelementbyid( 'message' ).innerhtml += innerhtml + '<br/>' ; } function onclose(){ websocket.close(); } }); //心跳检测 var heartcheck = { timeout: 10000 , timeoutobj: null , servertimeoutobj: null , start: function(){ console.log( "start heartcheck" ); var self = this ; this .timeoutobj && cleartimeout( this .timeoutobj); this .servertimeoutobj && cleartimeout( this .servertimeoutobj); this .timeoutobj = settimeout(function(){ //这里发送一个心跳,后端收到后,返回一个心跳消息, console.log( '发送心跳&' ); websocket.send( "&" ); self.servertimeoutobj = settimeout(function() { console.log(websocket); console.log( "服务器心跳回复超时" ); websocket.close(); }, self.timeout); }, this .timeout) } } </script> <body> <textarea id= "message" readonly></textarea> <br /> <input id= "msg" type= "text" /> <button type= "submit" id= "sendbutton" onclick= "posttoserver()" >send!</button> <button type= "submit" id= "sendbutton" onclick= "onclose()" >end</button> <script type= "text/javascript" src= "../js/websocket.js" ></script> </body> </html> |
三、服务器端如何使用websocket
1. pom.xml文件引入对应的依赖包:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<!-- websocket 开始--> <dependency> <groupid>javax.websocket</groupid> <artifactid>javax.websocket-api</artifactid> <version> 1.1 </version> <scope>provided</scope> </dependency> <dependency> <groupid>javax</groupid> <artifactid>javaee-api</artifactid> <version> 7.0 </version> <scope>provided</scope> </dependency> <!-- websocket 结束--> |
2. spring配置文件配置websocket服务类
1
2
3
|
<!-- websocket --> <bean id= "websocketservice" class = "minyuantec.tvwall.service.impl.websocketserviceimpl" scope= "singleton" > </bean> |
3. struts2配置文件过滤websocket请求
1
2
|
<!-- 过滤掉ws请求 --> <constant name= "struts.action.excludepattern" value= "/ws/.*,ws://.*" ></constant> |
4. 定义websocket.java类
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
|
@serverendpoint ( "/ws/websocket" ) public class websocket { private static logger logger = logger.getlogger(websocket. class ); @suppresswarnings ( "static-access" ) private messagehandler messagehandler = getwebsocketservice().messagehandler; //静态变量,用来记录当前在线连接数。应该把它设计成线程安全的 public static int onlinecount = 0 ; //与某个客户端的连接会话,需要通过它来给客户端发送数据 public session session; /** * 连接建立成功调用的方法 * @param session 可选的参数。session为与某个客户端的连接会话,需要通过它来给客户端发送数据 */ @onopen public void onopen(session session){ this .session = session; websocketmaputil.put(session.getid(), this ); //存入map addonlinecount(); //在线数加1 messagehandler.onconnect(session.getid()); system.out.println( "有新连接加入!当前在线人数为" + getonlinecount()); logger.info( "有新连接加入!当前在线人数为" + getonlinecount()); } /** * 连接关闭调用的方法 */ @onclose public void onclose(){ websocketmaputil.remove(session.getid()); //从map中删除 subonlinecount(); //在线数减1 messagehandler.ondisconnect(session.getid()); try { if (session != null ){ session.close(); } } catch (ioexception e) { e.printstacktrace(); } system.out.println( "有一连接关闭!当前在线人数为" + getonlinecount()); logger.info( "有一连接关闭!当前在线人数为" + getonlinecount()); } /** * 收到客户端消息后调用的方法 * @param message 客户端发送过来的消息 * @param session 可选的参数 */ @onmessage public string onmessage(string message, session session) { system.out.println( "来自客户端的消息:" + message); logger.info( "来自客户端的消息:" + message); if (message.equals( "&" )){ return "&" ; } else { messagehandler.onmessage(session.getid(),message); return "got your message (" + message + ")" ; } } /** * 发生错误时调用 * @param session * @param error */ @onerror public void onerror(session session, throwable error){ system.out.println( "发生错误" ); logger.info( "发生错误:" + error); error.printstacktrace(); } //单发消息 public void sendmessage(string message) throws ioexception{ //阻塞式(同步) //this.session.getbasicremote().sendtext(message); //非阻塞式(异步) this .session.getasyncremote().sendtext(message); } //群发消息 public void sendmessageall(string message) throws ioexception{ for (websocket websocket : websocketmaputil.getvalues()){ websocket.sendmessage(message); } } public static synchronized int getonlinecount() { return onlinecount; } public static synchronized void addonlinecount() { websocket.onlinecount++; } public static synchronized void subonlinecount() { websocket.onlinecount--; } public websocketserviceimpl getwebsocketservice(){ classpathxmlapplicationcontext classpathxmlapplicationcontext = new classpathxmlapplicationcontext( "classpath*:applicationcontext.xml" ); return (websocketserviceimpl) classpathxmlapplicationcontext.getbean( "websocketservice" ); } } |
5. 在websocketserviceimpl实现类里实现服务器推送消息的方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
@override public boolean sendmessage(string message) { logger.info( "发送给客户端的websocket消息message==" +message); if (messagehandler == null ) { logger.info( "上层调用者没有给messagehandler赋值,websocket消息无法发送到客户端" ); return false ; } if (message == null || "" .equals(message)) { logger.info( "发送给客户端的消息message为空" ); return false ; } try { for (websocket websocket : websocketmaputil.getvalues()){ websocket.sendmessage(message); logger.info( "给sessionid为" + websocket.session.getid() + "的客户端发送消息:" +message+ "=成功" ); } return true ; } catch (ioexception e) { logger.info( "向所有客户端发送消息:" +message+ "=失败:" + e); e.printstacktrace(); } return false ; } |
其实,使用tomcat8开发websocket服务端非常简单,主要有如下两种方式:
1. 使用注解方式开发(上述示例代码),被@serverendpoint修饰的java类即可作为websocket服务端。
2. 继承endpint基类实现websocket服务端。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持服务器之家。
原文链接:http://www.cnblogs.com/bingyimeiling/p/10276801.html