Spring之WebSocket网页聊天以及服务器推送

renyanping

Spring之WebSocket网页聊天以及服务器推送
　　转自:http://www.xdemo.org/spring-websocket-comet/

/Springframework /Spring之WebSocket网页聊天以及服务器推送
　　1. WebSocket protocol 是HTML5一种新的协议。它实现了浏览器与服务器全双工通信(full-duplex)。
　　2. 轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP request，然后由服务器返回最新的数据给客服端的浏览器。这种传统的HTTP request 的模式带来很明显的缺点 – 浏览器需要不断的向服务器发出请求，然而HTTP request 的header是非常长的，里面包含的有用数据可能只是一个很小的值，这样会占用很多的带宽。
　　3. 比较新的技术去做轮询的效果是Comet – 用了AJAX。但这种技术虽然可达到全双工通信，但依然需要发出请求
　　4. 在 WebSocket API，浏览器和服务器只需要要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送
　　5. 在此WebSocket 协议中，为我们实现即时服务带来了两大好处：
　　 5.1. Header
　　  互相沟通的Header是很小的-大概只有 2 Bytes
　　 5.2. Server Push
　　浏览器支持情况

Chrome	4+
Firefox	4+
Internet Explorer	10+
Opera	10+
Safari	5+

　　服务器支持

jetty	7.0.1+
tomcat	7.0.27+
Nginx	1.3.13+
resin	4+

　　API

var ws = new WebSocket(“ws://echo.websocket.org”); ws.onopen = function(){ws.send(“Test!”); }; //当有消息时，会自动调用此方法 ws.onmessage = function(evt){console.log(evt.data);ws.close();}; ws.onclose = function(evt){console.log(“WebSocketClosed!”);}; ws.onerror = function(evt){console.log(“WebSocketError!”);};

　　Demo简介
　　模拟了两个用户的对话，张三和李四，然后还有发送一个广播，即张三和李四都是可以接收到的，登录的时候分别选择张三和李四即可
　　Demo效果

　　Maven依赖

<dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-annotations</artifactId> <version>2.3.0</version> </dependency> <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-core</artifactId> <version>2.3.1</version> </dependency> <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-databind</artifactId> <version>2.3.3</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-messaging</artifactId> <version>4.0.5.RELEASE</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-websocket</artifactId> <version>4.0.5.RELEASE</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-webmvc</artifactId> <version>4.0.5.RELEASE</version> </dependency> <dependency> <groupId>com.google.code.gson</groupId> <artifactId>gson</artifactId> <version>2.3.1</version> </dependency> <dependency> <groupId>javax.servlet</groupId> <artifactId>javax.servlet-api</artifactId> <version>3.1.0</version> <scope>provided</scope> </dependency> <dependency> <groupId>junit</groupId> <artifactId>junit</artifactId> <version>3.8.1</version> <scope>test</scope> </dependency>

　　Web.xml，spring-mvc.xml，User.java请查看附件
　　WebSocket相关的类

　　WebSocketConfig，配置WebSocket的处理器（MyWebSocketHandler）和拦截器（HandShake）

package org.xdemo.example.websocket.websocket; import javax.annotation.Resource; import org.springframework.stereotype.Component; import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter; import org.springframework.web.socket.config.annotation.EnableWebSocket; import org.springframework.web.socket.config.annotation.WebSocketConfigurer; import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry; /** * WebScoket配置处理器 * @author Goofy * @Date 2015年6月11日 下午1:15:09 */ @Component @EnableWebSocket public class WebSocketConfig extends WebMvcConfigurerAdapter implements WebSocketConfigurer { @Resource MyWebSocketHandler handler; public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) { registry.addHandler(handler, "/ws").addInterceptors(new HandShake()); registry.addHandler(handler, "/ws/sockjs").addInterceptors(new HandShake()).withSockJS(); } }

　　MyWebSocketHandler

package org.xdemo.example.websocket.websocket; import java.io.IOException; import java.text.SimpleDateFormat; import java.util.Date; import java.util.HashMap; import java.util.Iterator; import java.util.Map; import java.util.Map.Entry; import org.springframework.stereotype.Component; import org.springframework.web.socket.CloseStatus; import org.springframework.web.socket.TextMessage; import org.springframework.web.socket.WebSocketHandler; import org.springframework.web.socket.WebSocketMessage; import org.springframework.web.socket.WebSocketSession; import org.xdemo.example.websocket.entity.Message; import com.google.gson.Gson; import com.google.gson.GsonBuilder; /** * Socket处理器 * * @author Goofy * @Date 2015年6月11日 下午1:19:50 */ @Component public class MyWebSocketHandler implements WebSocketHandler { public static final Map<Long, WebSocketSession> userSocketSessionMap; static { userSocketSessionMap = new HashMap<Long, WebSocketSession>(); } /** * 建立连接后 */ public void afterConnectionEstablished(WebSocketSession session) throws Exception { Long uid = (Long) session.getAttributes().get("uid"); if (userSocketSessionMap.get(uid) == null) { userSocketSessionMap.put(uid, session); } } /** * 消息处理，在客户端通过Websocket API发送的消息会经过这里，然后进行相应的处理 */ public void handleMessage(WebSocketSession session, WebSocketMessage<?> message) throws Exception { if(message.getPayloadLength()==0)return; Message msg=new Gson().fromJson(message.getPayload().toString(),Message.class); msg.setDate(new Date()); sendMessageToUser(msg.getTo(), new TextMessage(new GsonBuilder().setDateFormat("yyyy-MM-dd HH:mm:ss").create().toJson(msg))); } /** * 消息传输错误处理 */ public void handleTransportError(WebSocketSession session, Throwable exception) throws Exception { if (session.isOpen()) { session.close(); } Iterator<Entry<Long, WebSocketSession>> it = userSocketSessionMap .entrySet().iterator(); // 移除Socket会话 while (it.hasNext()) { Entry<Long, WebSocketSession> entry = it.next(); if (entry.getValue().getId().equals(session.getId())) { userSocketSessionMap.remove(entry.getKey()); System.out.println("Socket会话已经移除:用户ID" + entry.getKey()); break; } } } /** * 关闭连接后 */ public void afterConnectionClosed(WebSocketSession session, CloseStatus closeStatus) throws Exception { System.out.println("Websocket:" + session.getId() + "已经关闭"); Iterator<Entry<Long, WebSocketSession>> it = userSocketSessionMap .entrySet().iterator(); // 移除Socket会话 while (it.hasNext()) { Entry<Long, WebSocketSession> entry = it.next(); if (entry.getValue().getId().equals(session.getId())) { userSocketSessionMap.remove(entry.getKey()); System.out.println("Socket会话已经移除:用户ID" + entry.getKey()); break; } } } public boolean supportsPartialMessages() { return false; } /** * 给所有在线用户发送消息 * * @param message * @throws IOException */ public void broadcast(final TextMessage message) throws IOException { Iterator<Entry<Long, WebSocketSession>> it = userSocketSessionMap .entrySet().iterator(); // 多线程群发 while (it.hasNext()) { final Entry<Long, WebSocketSession> entry = it.next(); if (entry.getValue().isOpen()) { // entry.getValue().sendMessage(message); new Thread(new Runnable() { public void run() { try { if (entry.getValue().isOpen()) { entry.getValue().sendMessage(message); } } catch (IOException e) { e.printStackTrace(); } } }).start(); } } } /** * 给某个用户发送消息 * * @param userName * @param message * @throws IOException */ public void sendMessageToUser(Long uid, TextMessage message) throws IOException { WebSocketSession session = userSocketSessionMap.get(uid); if (session != null && session.isOpen()) { session.sendMessage(message); } } }

　　HandShake(每次建立连接都会进行握手)

package org.xdemo.example.websocket.websocket; import java.util.Map; import javax.servlet.http.HttpSession; import org.springframework.http.server.ServerHttpRequest; import org.springframework.http.server.ServerHttpResponse; import org.springframework.http.server.ServletServerHttpRequest; import org.springframework.web.socket.WebSocketHandler; import org.springframework.web.socket.server.HandshakeInterceptor; /** * Socket建立连接（握手）和断开 * * @author Goofy * @Date 2015年6月11日 下午2:23:09 */ public class HandShake implements HandshakeInterceptor { public boolean beforeHandshake(ServerHttpRequest request, ServerHttpResponse response, WebSocketHandler wsHandler, Map<String, Object> attributes) throws Exception { System.out.println("Websocket:用户[ID:" + ((ServletServerHttpRequest) request).getServletRequest().getSession(false).getAttribute("uid") + "]已经建立连接"); if (request instanceof ServletServerHttpRequest) { ServletServerHttpRequest servletRequest = (ServletServerHttpRequest) request; HttpSession session = servletRequest.getServletRequest().getSession(false); // 标记用户 Long uid = (Long) session.getAttribute("uid"); if(uid!=null){ attributes.put("uid", uid); }else{ return false; } } return true; } public void afterHandshake(ServerHttpRequest request, ServerHttpResponse response, WebSocketHandler wsHandler, Exception exception) { } }

　　一个Controller

package org.xdemo.example.websocket.controller; import java.io.IOException; import java.util.Date; import java.util.HashMap; import java.util.Map; import javax.annotation.Resource; import javax.servlet.http.HttpServletRequest; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.ModelAttribute; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; import org.springframework.web.bind.annotation.ResponseBody; import org.springframework.web.servlet.ModelAndView; import org.springframework.web.socket.TextMessage; import org.xdemo.example.websocket.entity.Message; import org.xdemo.example.websocket.entity.User; import org.xdemo.example.websocket.websocket.MyWebSocketHandler; import com.google.gson.GsonBuilder; @Controller @RequestMapping("/msg") public class MsgController { @Resource MyWebSocketHandler handler; Map<Long, User> users = new HashMap<Long, User>();                   //模拟一些数据 @ModelAttribute public void setReqAndRes() { User u1 = new User(); u1.setId(1L); u1.setName("张三"); users.put(u1.getId(), u1); User u2 = new User(); u2.setId(2L); u2.setName("李四"); users.put(u2.getId(), u2); } //用户登录 @RequestMapping(value="login",method=RequestMethod.POST) public ModelAndView doLogin(User user,HttpServletRequest request){ request.getSession().setAttribute("uid", user.getId()); request.getSession().setAttribute("name", users.get(user.getId()).getName()); return new ModelAndView("redirect:talk"); } //跳转到交谈聊天页面 @RequestMapping(value="talk",method=RequestMethod.GET) public ModelAndView talk(){ return new ModelAndView("talk"); } //跳转到发布广播页面 @RequestMapping(value="broadcast",method=RequestMethod.GET) public ModelAndView broadcast(){ return new ModelAndView("broadcast"); } //发布系统广播（群发） @ResponseBody @RequestMapping(value="broadcast",method=RequestMethod.POST) public void broadcast(String text) throws IOException{ Message msg=new Message(); msg.setDate(new Date()); msg.setFrom(-1L); msg.setFromName("系统广播"); msg.setTo(0L); msg.setText(text); handler.broadcast(new TextMessage(new GsonBuilder().setDateFormat("yyyy-MM-dd HH:mm:ss").create().toJson(msg))); } }

　　一个消息的封装的类

package org.xdemo.example.websocket.entity; import java.util.Date; /** * 消息类 * @author Goofy * @Date 2015年6月12日 下午7:32:39 */ public class Message { //发送者 public Long from; //发送者名称 public String fromName; //接收者 public Long to; //发送的文本 public String text; //发送日期 public Date date; public Long getFrom() { return from; } public void setFrom(Long from) { this.from = from; } public Long getTo() { return to; } public void setTo(Long to) { this.to = to; } public String getText() { return text; } public void setText(String text) { this.text = text; } public String getFromName() { return fromName; } public void setFromName(String fromName) { this.fromName = fromName; } public Date getDate() { return date; } public void setDate(Date date) { this.date = date; } }

　　聊天页面

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getServerName() + ":" + request.getServerPort() + path + "/"; String basePath2 = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script type="text/javascript" src="<%=basePath2%>resources/jquery.js"></script> <style> textarea { height: 300px; width: 100%; resize: none; outline: none; } input[type=button] { float: right; margin: 5px; width: 50px; height: 35px; border: none; color: white; font-weight: bold; outline: none; } .clear { background: red; } .send { background: green; } .clear:active { background: yellow; } .send:active { background: yellow; } .msg { width: 100%; height: 25px; outline: none; } #content { border: 1px solid gray; width: 100%; height: 400px; overflow-y: scroll; } .from { background-color: green; width: 80%; border-radius: 10px; height: 30px; line-height: 30px; margin: 5px; float: left; color: white; padding: 5px; font-size: 22px; } .to { background-color: gray; width: 80%; border-radius: 10px; height: 30px; line-height: 30px; margin: 5px; float: right; color: white; padding: 5px; font-size: 22px; } .name { color: gray; font-size: 12px; } .tmsg_text { color: white; background-color: rgb(47, 47, 47); font-size: 18px; border-radius: 5px; padding: 2px; } .fmsg_text { color: white; background-color: rgb(66, 138, 140); font-size: 18px; border-radius: 5px; padding: 2px; } .sfmsg_text { color: white; background-color: rgb(148, 16, 16); font-size: 18px; border-radius: 5px; padding: 2px; } .tmsg { clear: both; float: right; width: 80%; text-align: right; } .fmsg { clear: both; float: left; width: 80%; } </style> <script> var path = '<%=basePath%>'; var uid=${uid eq null?-1:uid}; if(uid==-1){ location.href="<%=basePath2%>"; } var from=uid; var fromName='${name}'; var to=uid==1?2:1; var websocket; if ('WebSocket' in window) { websocket = new WebSocket("ws://" + path + "/ws?uid="+uid); } else if ('MozWebSocket' in window) { websocket = new MozWebSocket("ws://" + path + "/ws"+uid); } else { websocket = new SockJS("http://" + path + "/ws/sockjs"+uid); } websocket.onopen = function(event) { console.log("WebSocket:已连接"); console.log(event); }; websocket.onmessage = function(event) { var data=JSON.parse(event.data); console.log("WebSocket:收到一条消息",data); var textCss=data.from==-1?"sfmsg_text":"fmsg_text"; $("#content").append("<div><label>"+data.fromName+"&nbsp;"+data.date+"</label><div class='"+textCss+"'>"+data.text+"</div></div>"); scrollToBottom(); }; websocket.onerror = function(event) { console.log("WebSocket:发生错误 "); console.log(event); }; websocket.onclose = function(event) { console.log("WebSocket:已关闭"); console.log(event); } function sendMsg(){ var v=$("#msg").val(); if(v==""){ return; }else{ var data={}; data["from"]=from; data["fromName"]=fromName; data["to"]=to; data["text"]=v; websocket.send(JSON.stringify(data)); $("#content").append("<div><label>我&nbsp;"+new Date().Format("yyyy-MM-dd hh:mm:ss")+"</label><div>"+data.text+"</div></div>"); scrollToBottom(); $("#msg").val(""); } } function scrollToBottom(){ var div = document.getElementById('content'); div.scrollTop = div.scrollHeight; } Date.prototype.Format = function (fmt) { //author: meizz    var o = {        "M+": this.getMonth() + 1, //月份        "d+": this.getDate(), //日        "h+": this.getHours(), //小时        "m+": this.getMinutes(), //分        "s+": this.getSeconds(), //秒        "q+": Math.floor((this.getMonth() + 3) / 3), //季度        "S": this.getMilliseconds() //毫秒    };    if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));    for (var k in o)    if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));    return fmt; } function send(event){ var code; if(window.event){ code = window.event.keyCode; // IE }else{ code = e.which; // Firefox } if(code==13){ sendMsg();             } } function clearAll(){ $("#content").empty(); } </script> </head> <body> 欢迎：${sessionScope.name } <div id="content"></div> <input type="text" placeholder="请输入要发送的信息" id="msg" onkeydown="send(event)"> <input type="button" value="发送"  > <input type="button" value="清空" > </body> </html>

　　发布广播的页面

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath= request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script type="text/javascript" src="<%=basePath%>resources/jquery.js"></script> <script type="text/javascript"> var path='<%=basePath%>'; function broadcast(){ $.ajax({ url:path+'msg/broadcast', type:"post", data:{text:$("#msg").val()}, dataType:"json", success:function(data){ alert("发送成功"); } }); } </script> </head> <body> 发送广播 <textarea style="width:100%;height:300px;" id="msg" ></textarea> <input type="button" value="发送" > </body> </html>

　　Chrome的控制台网络信息
　　Type:websocket
　　Time:Pending
　　表示这是一个websocket请求，请求一直没有结束，可以通过此通道进行双向通信，即双工，实现了服务器推送的效果，也减少了网络流量。

　　Chrome控制台信息

　　Demo下载

　　百度网盘:http://pan.baidu.com/s/1dD0b15Z