SpringMVC Websoket 测试网页即时通讯

说明：测试项目是 springmvc + maven 框架

项目框架图 

1.使用的jar包

 

<dependency>
  <groupId>javax</groupId>
  <artifactId>javaee-api</artifactId>
  <version>7.0</version>
  <scope>provided</scope>
</dependency>

 

2.后端controller层代码

 

AdminController 用户登录类代码

/**  * 用户controller  *  * @author HUYONG  * @create 2016-12-08  */ @Controller @RequestMapping("/admin") public class AdminController extends BaseController { private static Logger LOGGER = LoggerFactory.getLogger(AdminController.class);   @Autowired  AndysosoService andysosoService;   /**  * 用户登录  * @param userName  * @param password  * @return  */  @RequestMapping(value = "/adminLogin") @ResponseBody  public Result adminLogin(HttpServletRequest request, String userName, String password){ Map<String,Object> map = Maps.newHashMap();  AndysosoAdminDO adminDO = null;  int status = 0;  try { if(StringUtils.isNotEmpty(userName) && StringUtils.isNotEmpty(password)){ adminDO = andysosoService.getAndysosoAdminDO(userName,password);  } if(null != adminDO){ request.getSession().setAttribute("andysosoAdmin",adminDO);  status = 1;  } }catch (Exception e){ LOGGER.error("用户登录出现异常！",e);  } map.put("status",status);  return successResponse(map);  } }

 

AndysosoController 进入user_im.jsp 页面的类代码

/**
 * 功能点controller
 *
 * @author HUYONG
 * @create 2016-12-08
 */
@Controller
@RequestMapping("/andysoso")
public class AndysosoController extends BaseController{

    private static Logger LOGGER = LoggerFactory.getLogger(AndysosoController.class);

    @Autowired
    AndysosoService andysosoService;

    /**
     * 进入IM页面
     * @return
     */
    @RequestMapping(value = "/actionImView")
    public ModelAndView actionImView(HttpServletRequest request){
        Map<String,Object> map = Maps.newHashMap();
        String viewUrl = "";
        try {
            AndysosoAdminDO adminDO = (AndysosoAdminDO)request.getSession().getAttribute("andysosoAdmin");
            if(null != adminDO){
                List<AndysosoAdminDO> adminList = andysosoService.getAndysosoAdminDOList();
                map.put("andyAdmin",adminDO);
                map.put("adminList",adminList);
                viewUrl = "admin/user_im";
            }
        }catch (Exception e){
            LOGGER.error("进入IM页面出现异常！",e);
        }
        return createMav(viewUrl,map);
    }
}

WebsocketControllrt 类代码

package com.weijuju.iag.andysoso.personal.controller.websocket;

import net.sf.json.JSONObject;
import org.apache.commons.lang.StringUtils;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

import javax.websocket.*;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.Map;
import java.util.concurrent.ConcurrentHashMap;

/**
 * WebSocket处理类
 *
 * @author HUYONG
 * @create 2016-12-06
 */
@ServerEndpoint("/websocket.ws/{userCode}")
public class WebsocketControllrt {

    private static Logger LOGGER = LoggerFactory.getLogger(WebsocketControllrt.class);

    private static Map<String,Session> webSocketSet = new ConcurrentHashMap<>();

    /**
     * 打开连接事触发
     * @param session
     */
    @OnOpen
    public void onOpen(@PathParam("userCode") String userCode,Session session){
        LOGGER.info("打开websocket连接...");
        webSocketSet.put(userCode,session);
    }

    /**
     * 收到客户端消息时触发，并发送给特定用户
     * @param textJson
     * @return
     */
    @OnMessage
    public String onMessage(String textJson){
        String userCode = "";
        String message = "";
        try {
            if(StringUtils.isNotEmpty(textJson)){
                //解析字符串
                JSONObject object = JSONObject.fromObject(textJson);
                userCode = object.getString("sendName");
                message = object.getString("message");
                Session session = webSocketSet.get(userCode);
                if(null != session){
                    session.getBasicRemote().sendText(message);
                }
            }
        } catch (IOException e) {
            e.printStackTrace();
        } finally {
        }
        return "已经给"+userCode+"发送消息啦！message："+message;
    }


    /**
     * 异常时触发
     */
    @OnError
    public void onError(Throwable throwable) {
        LOGGER.info("Websocket连接出现异常:");
        LOGGER.info(throwable.getMessage(), throwable);
    }

    /**
     * 关闭连接时触发
     */
    @OnClose
    public void onClose(@PathParam("userCode") String userCode) {
        LOGGER.info("Websocket 关闭连接...");
        webSocketSet.remove(userCode);
    }
}

 

3.前端JSP页面代码

 

index.jsp 登录页代码 如下：

<%@ page language="java"  pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<body>
<h2>Login Websoket IM View</h2>
<p>请输入用户名：<input id="userName" type="text"/></p>
<p>请输入密码：<input id="password" type="password"/></p>
<button onclick="login()">登录</button>
<hr/>
</body>
<script src="resource/jquery-2.2.4.js"></script>
<script type="text/javascript">
    function login(){
        var userName = $("#userName").val();
        var password = $("#password").val();
        $.ajax({
            type:"post",
            url:"/admin/adminLogin",
            data:{userName:userName,password:password},
            dataType:"json",
            success:function(data){
                if(data.model.status == 1){
                    window.location.href = "/andysoso/actionImView";
                }else{
                    alert("登录失败！");
                }
            }
        });
    }
</script>
</html>

 

user_im.jsp  代码 如下：

<%@ page language="java"  pageEncoding="utf-8"%>
<%@include file="/common/taglibs.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<body>
<h2>Hello World! Action Websoket  <span>当前登录用户：${andyAdmin.userName}</span></h2>
<div style="width: 100%;">
    <div style="float: left; width: 70%; height: 100%; background-color: antiquewhite;">
        <p id="message"></p>
    </div>
    <div id="friend" style="float: right; width: 30%; height: 100%; background-color: aquamarine;">
        <p>好友列表</p>
        <c:forEach items="${adminList}" var="admin">
            <p><a href="#" onclick="createReceiveUser(${admin.userName})">${admin.userName}</a></p>
        </c:forEach>
    </div>
</div>
<hr/>
<p>给<span id="sendName">${andyAdmin.userName}</span>发送消息：<input id="text" type="text"/>&nbsp;<button onclick="send()">发送消息</button></p>
<button onclick="closeWebSocket()">关闭WebSocket连接</button>
</body>
<script src="/resource/jquery-2.2.4.js"></script>
<script type="text/javascript">
    var userName = "${andyAdmin.userName}";
    var websocket = null;
    //判断当前浏览器是否支持WebSocket
    if ('WebSocket' in window) {
        //取到一个客户端的socket
        websocket = new WebSocket("ws://127.0.0.1:8080/websocket.ws/"+userName);
    }
    else {
        alert('当前浏览器 Not support websocket')
    }
    //连接发生错误的回调方法
    websocket.onerror = function () {
        setMessageInnerHTML("WebSocket连接发生错误");
    };
    //连接成功建立的回调方法
    websocket.onopen = function () {
        setMessageInnerHTML("<span style='color:red;'>WebSocket连接成功</span>");
    }
    //接收到消息的回调方法
    websocket.onmessage = function (event) {
        setMessageInnerHTML(event.data);
    }
    //连接关闭的回调方法
    websocket.onclose = function () {
        setMessageInnerHTML("WebSocket连接关闭");
    }
    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
    window.onbeforeunload = function () {
        closeWebSocket();
    }
    //将消息显示在网页上
    function setMessageInnerHTML(innerHTML) {
        document.getElementById('message').innerHTML += innerHTML + '<br/>';
    }
    //关闭WebSocket连接
    function closeWebSocket() {
        websocket.close();
    }
    //发送消息
    function send() {
        var message = document.getElementById('text').value;
        var sendName = $("#sendName").text();
        var textJson = '{"sendName":"'+sendName+'","message":"'+message+'"}'
        if(websocket.readyState != 3){
            websocket.send(textJson);
        }else{
            alert("websocket连接已经关闭或者出现网络异常！");
        }
    }
    //指定消息接收人
    function createReceiveUser(userName){
        alert("给"+userName+"发送消息");
        $("#sendName").text(userName);
    }
</script>
</html>

 

5.页面展示效果

下面是两个浏览器的实际测试效果