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

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="发送" onclick="sendMsg()" >

<input type="button" value="清空" onclick="clearAll()">

</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="发送" onclick="broadcast()">

</body>

</html>

Chrome的控制台网络信息

Type:websocket

Time:Pending

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

Chrome控制台信息

Demo下载

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