java开发之使用websocket实现web客户端与服务器之间的实时通讯

第一次写博客，有写的不好的地方欢迎大家指点。
使用websocket实现web客户端与服务器之间的实时通讯。以下是个简单的demo。

import java.util.Date;

public class WebSocketMessage {

    /**
     * 发送者ID
     */
    private String senderId;

    /**
     * 接受者ID, 如果为0, 则发送给所有人
     */
    private String receiverId;

    /**
     * 会话内容
     */
    private String messageContent;

    /**
     * 发送时间
     */
    private Date sendTime;

    public String getSenderId() {
        return senderId;
    }

    public void setSenderId(String senderId) {
        this.senderId = senderId;
    }

    public String getReceiverId() {
        return receiverId;
    }

    public void setReceiverId(String receiverId) {
        this.receiverId = receiverId;
    }

    public String getMessageContent() {
        return messageContent;
    }

    public void setMessageContent(String messageContent) {
        this.messageContent = messageContent;
    }

    public Date getSendTime() {
        return sendTime;
    }

    public void setSendTime(Date sendTime) {
        this.sendTime = sendTime;
    }

}

import javax.servlet.http.HttpServletResponse;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;

@Controller
@RequestMapping("webSocket")
public class WebSocketController {

    @RequestMapping(value = "messagePage/{userID}")
    public ModelAndView messagePage(@PathVariable String userID, HttpServletResponse response) {
        ModelAndView mav = new ModelAndView();
        mav.addObject("userID", userID);
        mav.setViewName("web_socket");
        return mav;
    }
}

import java.io.IOException;
import java.util.Map;
import java.util.concurrent.ConcurrentHashMap;

import javax.websocket.OnClose;
import javax.websocket.OnError;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;

import com.alibaba.fastjson.JSON;
import com.utime.facade.model.systemplate.WebSocketMessage;

@ServerEndpoint("/webSocketServer/{userID}")
public class WebSocketServer {
    // 连接客户端数量
    private static int onlineCount = 0;
    // 所有的连接客户端
    private static Map<String, WebSocketServer> clients = new ConcurrentHashMap<String, WebSocketServer>();
    // 当前客户端连接的唯一标示
    private Session session;
    // 当前客户端连接的用户ID
    private String userID;

    /**
     * 客户端连接服务端回调函数
     * 
     * @param userID 用户ID
     * @param session 会话
     * @throws IOException
     */
    @OnOpen
    public void onOpen(@PathParam("userID") String userID, Session session) throws IOException {
        this.userID = userID;
        this.session = session;

        addOnlineCount();
        clients.put(userID, this);
        System.out.println("WebSocket日志: 有新连接加入！当前在线人数为" + getOnlineCount());
    }

    @OnClose
    public void onClose() throws IOException {
        clients.remove(userID);
        subOnlineCount();
        System.out.println("WebSocket日志: 有一连接关闭！当前在线人数为" + getOnlineCount());
    }

    /**
     * 接受到来自客户端的消息
     * 
     * @param message
     * @throws IOException
     */
    @OnMessage
    public void onMessage(String message) throws IOException {
        System.out.println("WebSocket日志: 来自客户端的消息:" + message);
        WebSocketMessage webSocketMessage = JSON.parseObject(message, WebSocketMessage.class);

        // 发送消息给所有客户端
        if ("0".equals(webSocketMessage.getReceiverId())) {
            for (WebSocketServer item : clients.values()) {
                item.session.getAsyncRemote().sendText(webSocketMessage.getMessageContent());
                System.out.println("WebSocket日志: ID为"+ webSocketMessage.getSenderId() +"的用户给ID为"+ item.userID +"的客户端发送:" + webSocketMessage.getMessageContent());
            }
        } else {    // 发送消息给指定ID的客户端
            for (WebSocketServer item : clients.values()) {
                if (item.userID.equals(webSocketMessage.getReceiverId())){
                    // 发消息给指定客户端
                    item.session.getAsyncRemote().sendText(webSocketMessage.getMessageContent());
                    System.out.println("WebSocket日志: ID为"+ webSocketMessage.getSenderId() +"的用户给ID为"+ item.userID +"的客户端发送:" + webSocketMessage.getMessageContent());
                    if (!webSocketMessage.getSenderId().equals(webSocketMessage.getReceiverId())) {
                        // 发消息给自己
                        this.session.getAsyncRemote().sendText(webSocketMessage.getMessageContent());
                        System.out.println("WebSocket日志: ID为"+ webSocketMessage.getSenderId() +"的用户给ID为"+ this.userID +"的客户端发送:" + webSocketMessage.getMessageContent());
                    }
                    break;
                }
            }
        }
    }
    
    /**
     * 服务端报错了
     * 
     * @param session
     * @param error
     */
    @OnError
    public void onError(Session session, Throwable error) {
        System.out.println("WebSocket日志: 发生错误");
        error.printStackTrace();
    }
    
    /**
     * 客户端连接数+1
     */
    public static synchronized void addOnlineCount() {
        WebSocketServer.onlineCount++;
    }
    
    /**
     * 客户端连接数-1
     */
    public static synchronized void subOnlineCount() {
        WebSocketServer.onlineCount--;
    }

    public static synchronized int getOnlineCount() {
        return onlineCount;
    }

    public static synchronized Map<String, WebSocketServer> getClients() {
        return clients;
    }
}

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt"  prefix="fmt"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fun"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%> 
<c:set var="baseurl" value="${pageContext.request.contextPath}/"></c:set>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>web_socket</title>

<script type="text/javascript" src="${baseurl}static/js/jquery-2.1.1.js"></script>
<style type="text/css">
    .connector {width: 500px;}
</style>
</head>
<body>
    Welcome
    <br/>
    <input id="text" type="text"/>
    <button onclick="sendToOne(10008)">发消息给个人</button>
    <button onclick="sendToAll(0)">发消息给所有人</button>
    <hr/>
    <button onclick="closeWebSocket()">关闭WebSocket连接</button>
    <hr/>
    <div id="message"></div>
</body>
<script type="text/javascript">
    var websocket = null;
    var host = document.location.host;
    
    //判断当前浏览器是否支持WebSocket
    if ('WebSocket' in window) {
        console.info("浏览器支持Websocket");
        websocket = new WebSocket('ws://'+host+'/${baseurl}/webSocketServer/${userID}');
    } else {
        console.info('当前浏览器 Not support websocket');
    }
    
    //连接发生错误的回调方法
    websocket.onerror = function() {
        console.info("WebSocket连接发生错误");
        setMessageInnerHTML("WebSocket连接发生错误"); 
    }
    
    //连接成功建立的回调方法
    websocket.onopen = function() {
        console.info("WebSocket连接成功");
        setMessageInnerHTML("WebSocket连接成功"); 
    } 
    
    //接收到消息的回调方法 
    websocket.onmessage = function(event) {
        console.info("接收到消息的回调方法");
        console.info("这是后台推送的消息："+event.data);
        setMessageInnerHTML(event.data); 
        console.info("webSocket已关闭！");
    }
    
    //连接关闭的回调方法 
    websocket.onclose = function() {
        setMessageInnerHTML("WebSocket连接关闭");
    }
    
    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
    window.onbeforeunload = function() {
        closeWebSocket();
    }
    
    //关闭WebSocket连接 
    function closeWebSocket() {
        websocket.close();
    }
    
    //将消息显示在网页上
    function setMessageInnerHTML(innerHTML) {
        document.getElementById('message').innerHTML += innerHTML + '<br/>';
    }
    
    //发送消息给其他客户端
    function sendToOne(receiverId) {
        var messageContent = document.getElementById('text').value;
        var message = {};
        message.senderId = "${userID}";
        message.receiverId = receiverId;
        message.messageContent = messageContent;
        websocket.send(JSON.stringify(message));
    }
    
    //发送消息给所有人
    function sendToAll() {
        var messageContent = document.getElementById('text').value;
        var message = {};
        message.senderId = "${userID}";
        message.receiverId = "0";
        message.messageContent = messageContent;
        websocket.send(JSON.stringify(message));
    }
</script>
</html>

写这个的目的只是为了自己做个记录。
写的不好，后面会慢慢完善。