websocket实现聊天室等功能

最近有做一个h5项目，有如下场景需求：
1.实现实时聊天。
2.多人登录，有一个教师角色可控制其他角色用户的视频播放（播放，暂停，快进）。
最初考虑视频控制的实现方向是推流，但是由于没有接触过这方面，着实头疼了一阵。最后，经过一夜梦中思考，次日上午，采用指令的方式实现对视频的控制。
是不是听着很高大上？其实很简单，以上两个功能都是通过onmessage函数实现，将教师端的页面加上监控视频的事件，以指令的方式发送至学生端。

以下是一些核心代码：
后端java代码：

import java.io.IOException;
import java.nio.CharBuffer;
import java.util.HashMap;
import java.util.Map;
import java.util.Set;

public class WebSocketMessageInboundPool {

    //保存连接的MAP容器
    private static final Map<String,WebSocketMessageInbound > connections = new HashMap<String,WebSocketMessageInbound>();

    //向连接池中添加连接
    public static void addMessageInbound(WebSocketMessageInbound inbound){
        //添加连接
        System.out.println("user : " + inbound.getUser() + " join..");
        connections.put(inbound.getUser(), inbound);
    }

    //获取所有的在线用户
    public static Set<String> getOnlineUser(){
        return connections.keySet();
    }

    public static void removeMessageInbound(WebSocketMessageInbound inbound){
        //移除连接
        System.out.println("user : " + inbound.getUser() + " exit..");
        connections.remove(inbound.getUser());
    }

    public static void sendMessageToUser(String user,String message){
        try {
            //向特定的用户发送数据
            System.out.println("send message to user : " + user + " ,message content : " + message);
            WebSocketMessageInbound inbound = connections.get(user);
            if(inbound != null){
                inbound.getWsOutbound().writeTextMessage(CharBuffer.wrap(message));
            }
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

    //向所有的用户发送消息
    public static void sendMessage(String message){
        try {
            Set<String> keySet = connections.keySet();
            for (String key : keySet) {
                WebSocketMessageInbound inbound = connections.get(key);
                if(inbound != null){
                    System.out.println("send message to user : " + key + " ,message content : " + message);
                    inbound.getWsOutbound().writeTextMessage(CharBuffer.wrap(message));
                }
            }
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
}

import java.io.IOException;
import java.nio.ByteBuffer;
import java.nio.CharBuffer;

import net.sf.json.JSONObject;

import org.apache.catalina.websocket.MessageInbound;
import org.apache.catalina.websocket.WsOutbound;

public class WebSocketMessageInbound extends MessageInbound {

    //当前连接的用户名称
    private final String user;

    public WebSocketMessageInbound(String user) {
        this.user = user;
    }

    public String getUser() {
        return this.user;
    }

    //建立连接的触发的事件
    @Override
    protected void onOpen(WsOutbound outbound) {
        // 触发连接事件，在连接池中添加连接
        JSONObject result = new JSONObject();
        result.element("type", "user_join");
        result.element("user", this.user);
        //向所有在线用户推送当前用户上线的消息
//      WebSocketMessageInboundPool.sendMessage(result.toString());

        result = new JSONObject();
        result.element("type", "get_online_user");
        result.element("list", WebSocketMessageInboundPool.getOnlineUser());
        //向连接池添加当前的连接对象
        WebSocketMessageInboundPool.addMessageInbound(this);
        //向当前连接发送当前在线用户的列表
//      WebSocketMessageInboundPool.sendMessageToUser(this.user, result.toString());
    }

    @Override
    protected void onClose(int status) {
        // 触发关闭事件，在连接池中移除连接
        WebSocketMessageInboundPool.removeMessageInbound(this);
        /*JSONObject result = new JSONObject();
        result.element("type", "user_leave");
        result.element("user", this.user);
        //向在线用户发送当前用户退出的消息
        WebSocketMessageInboundPool.sendMessage(result.toString());*/
    }

    @Override
    protected void onBinaryMessage(ByteBuffer message) throws IOException {
        throw new UnsupportedOperationException("Binary message not supported.");
    }

    //客户端发送消息到服务器时触发事件
    @Override
    protected void onTextMessage(CharBuffer message) throws IOException {
        JSONObject jsStr = JSONObject.fromObject(message.toString());
        System.out.println(message.toString());
        if(jsStr.containsKey("to")){
            String uid = jsStr.getString("to");
            WebSocketMessageInboundPool.sendMessageToUser(uid, message.toString());
        }else{
            //向所有在线用户发送消息
            WebSocketMessageInboundPool.sendMessage(message.toString());
        }
    }
}

import java.util.concurrent.atomic.AtomicInteger;  

import javax.servlet.http.HttpServletRequest;  

import org.apache.catalina.websocket.StreamInbound;  
import org.apache.catalina.websocket.WebSocketServlet;  

public class HelloWebSocketServlet extends WebSocketServlet {  
    private static final long serialVersionUID = 1L;  

    private final AtomicInteger connectionIds = new AtomicInteger(0);  
  //跟平常Servlet不同的是，需要实现createWebSocketInbound，在这里初始化自定义的WebSocket连接对象
    @Override
    protected StreamInbound createWebSocketInbound(String subProtocol,HttpServletRequest request) {
        return new WebSocketMessageInbound(this.getUser(request));
    }
    public String getUser(HttpServletRequest request){
        return (String) request.getParameter("id");
    }
}  

前端js：
教师端

var websocket;
var audio = document.getElementById('event_video'); 
//var wsUrl = "ws://daxin.tunnel.qydev.com/yanl-websocket/websocket/say?id=";
var wsUrl = "ws://"+ipaddr+"/yanl-websocket/websocket/say?id=";
//var wsUrl = "ws://127.0.0.1:8080/yanl-websocket/websocket/say?id=";
//视频控制
var video = {
    timer:null,
    audioStat : false,
    reset : function(){
         audio.currentTime = 0;
    },
    play : function(){
        if(audio!==null){
            video.audioStat = true;
            user_ws.allSendInstructions(video_flag.play + Math.ceil(audio.currentTime));
        }
    },
    monitoring : function (){
        //关闭之前开启的定时事件
        if(video.timer != null){
            window.clearInterval(video.timer);
        }
        var time1 = audio.currentTime;
        video.timer = setInterval(function(){
            time2 = time1;
            time1 = audio.currentTime;
            console.info(time1-time2);
            if((time1-time2)>1){
                console.info("快进了");
                user_ws.allSendInstructions(video_flag.go_to + Math.ceil(time1));
            }else if(audio.paused && video.audioStat){
                video.audioStat = false;
                user_ws.allSendInstructions(video_flag.pause + Math.ceil(time1));
            }
            if(time1 == audio.duration || time1 == 0){
                window.clearInterval(video.timer);
                console.info("暂停了");
            }
        },300);
    }
}

var user_ws = {
    crid : "",
    userList : [],
    user_guid : "",
    name : "",
    send : function(toId,content,instructions){
        var data={};
        data.to = toId;
        data.from = user_ws.user_guid;
        data.content = content;
        data.type = instructions == null ? 'message':instructions;
        websocket.send(JSON.stringify(data));
    },
    allSendInstructions : function(content){
        for ( var u in users.list) {
            if(users.list[u].realizeUsers != null && users.list[u].realizeUsers != ""){
                for ( var uu in users.list[u].realizeUsers) {
                    user_ws.send(users.list[u].realizeUsers[uu].su_id,content,'instructions');
                }
            }
        }
    },
    allSend : function(content){
        for ( var u in users.list) {
            if(users.list[u].realizeUsers != null && users.list[u].realizeUsers != ""){
                for ( var uu in users.list[u].realizeUsers) {
                    user_ws.send(u.user_suid,content);
                }
            }
        }
    },
    eventChange : function(){
        user_ws.allSendInstructions("eventChange");
    }
}

$(document).ready(function() {

    var suid = sessionStorage.getItem("suid");
    suid = JSON.parse(suid); 
    //用户的全局唯一标识：个人id
    user_ws.user_guid = suid.data.su_id;
    ws_com.user_guid = suid.data.su_id;
    user_ws.name = suid.data.su_name;
    user_ws.crid = sessionStorage.getItem("crid");
    //初始化websocket
    if ('WebSocket' in window) {
        websocket = new WebSocket(wsUrl + user_ws.user_guid);
    } 
    websocket.onmessage = function(event) {
        var data=JSON.parse(event.data);
        if(data.type == "message"){
            if(!($(this).hasClass('active'))) {
                $("#message").addClass("active");
                $(".message").css("visibility", "visible");
                $(".message").css("z-index",10);
            }
            //接收聊天内容
            var content = JSON.parse(data.content);
            ws_com.createRecord(content);
        }
    };
  });

function yp(){
    var ypv = $("#ylpx").val();
    user_ws.allSendInstructions(ypv);
}

$("#content_c").mousedown(function(e){
        if(e&&e.stopPropagation){//非IE
               e.stopPropagation();
              }
              else{//IE
               window.event.cancelBubble=true;
              }
});
$("#messAll").mousedown(function(e){
    if(e&&e.stopPropagation){//非IE
        e.stopPropagation();
    }
    else{//IE
        window.event.cancelBubble=true;
    }
});
$("#userList_c").mousedown(function(e){
    if(e&&e.stopPropagation){//非IE
        e.stopPropagation();
    }
    else{//IE
        window.event.cancelBubble=true;
    }
});

学生端：

// 初始化websocket
var websocket;
var audio = document.getElementById('v');
var wsUrl = "ws://"+ipaddr+"/yanl-websocket/websocket/say?id=";
//var wsUrl = "ws://127.0.0.1:8080/yanl-websocket/websocket/say?id=";
//var wsUrl = "ws://daxin.tunnel.qydev.com/yanl-websocket/websocket/say?id=";

var video = {
    pause : function (time){
        audio.currentTime = time;
        audio.pause();
    },
    play : function(time){
        if (audio !== null) {
            if (audio.currentTime == 0) {
                audio.play();
            } else {
                audio.currentTime = time;
                audio.play();
            }
        }
    },
    go_to : function(time){
        audio.currentTime = time;
        audio.play();
    }
}

$(function(){
    var suid = sessionStorage.getItem("suid");
    suid = JSON.parse(suid);
    //用户的全局唯一标识：事件id+个人id，中间以逗号隔开
    var user_guid = suid.data.su_id;
    ws_com.user_guid = user_guid;
    //初始化websocket
    if ('WebSocket' in window) {
        websocket = new WebSocket(wsUrl + user_guid);
    }
    websocket.onmessage = function(event) {
        var data = JSON.parse(event.data);
        if(data.type == "instructions"){
            if (data.content.indexOf(video_flag.play) > -1) {
                var time = data.content.split(video_flag.play)[1];
                video.play(time);
            } else if (data.content.indexOf(video_flag.pause) > -1) {
                var time = data.content.split(video_flag.pause)[1];
                video.pause(time);
            } else if (data.content.indexOf(video_flag.go_to) > -1) {
                var time = data.content.split(video_flag.go_to)[1];
                video.go_to(time);
            } else if (data.content.indexOf("eventChange") > -1) {
                //刷新页面数据  
                events.getEventsList();
            }else if (data.content.indexOf("wd_show") > -1) {
                //培训/演练切换
                $("#newShow").show();
                $("#wd").show();
            }else if (data.content.indexOf("wd_hide") > -1) {
                //培训/演练切换
                $("#newShow").hide();
                $("#wd").hide();
            }
        }else if(data.type == "message"){
            if(!($(this).hasClass('active'))) {
                communication.openWindow();
                $("#message").addClass("active");
                $(".message").css("visibility", "visible");
                $(".message").css("z-index",10);
            }
            //接收聊天内容
            var content = JSON.parse(data.content);
            ws_com.createRecord(content);
        }
    };

});

//阻止事件冒泡
$("#content_c").mousedown(function(e){
    if(e&&e.stopPropagation){//非IE
           e.stopPropagation();
          }
          else{//IE
           window.event.cancelBubble=true;
          }
});
$("#messAll").mousedown(function(e){
    if(e&&e.stopPropagation){//非IE
        e.stopPropagation();
    }
    else{//IE
        window.event.cancelBubble=true;
    }
});
$("#userList").mousedown(function(e){
    if(e&&e.stopPropagation){//非IE
        e.stopPropagation();
    }
    else{//IE
        window.event.cancelBubble=true;
    }
});

注意！！！
Tomcat7和8对于websocket的支持是不同的，以上代码是使用的Tomcat7，友情提示，避免踩坑