SpringMVC Websoket 测试网页即时通讯
2016-12-09 11:41
633 查看
说明：测试项目是 springmvc + maven 框架项目框架图 
1.使用的jar包
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*/@OnOpenpublic void onOpen(@PathParam("userCode") String userCode,Session session){LOGGER.info("打开websocket连接...");webSocketSet.put(userCode,session);}/*** 收到客户端消息时触发，并发送给特定用户* @param textJson* @return*/@OnMessagepublic 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;}/*** 异常时触发*/@OnErrorpublic void onError(Throwable throwable) {LOGGER.info("Websocket连接出现异常:");LOGGER.info(throwable.getMessage(), throwable);}/*** 关闭连接时触发*/@OnClosepublic 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"/> <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;//判断当前浏览器是否支持WebSocketif ('WebSocket' in window) {//取到一个客户端的socketwebsocket = 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.页面展示效果下面是两个浏览器的实际测试效果
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- WebSocket集成XMPP网页即时通讯1：Java Web Project服务端/客户端Jetty9开发初探
- 测试即时通讯 压力测试案例【一】
- [引]ASP.NET 移动网页 与 如何：使用仿真程序和浏览器在部署移动 Web 应用程序之前对其进行测试
- 基于SignalR的web端即时通讯 - ChatJS
- WEB测试之网页测试
- selenium webdriver + Junit 自动化测试：打开不同浏览器网页
- QQ网页通讯组件测试
- WEB网页测试利器Selenium-RC
- [CareerCup] 12.4 Test a Webpage 测试一个网页
- [Web开发] IE 所有版本打包下载，网页兼容测试必备
- 在网页中加入MSN、QQ以实现即时通讯
- [Web开发] 网页的浏览器兼容性测试工具
- loadruner测试结果分析Web Page Diagnostics (网页细分图)
- MAVEN 搭建基于springmvc web项目+jetty-maven-plugin测试
- [引]ASP.NET 移动网页 与 如何：使用仿真程序和浏览器在部署移动 Web 应用程序之前对其进行测试
- [Web开发] 网页的浏览器兼容性测试工具
- web页面即时通讯简单原型
- Web网页测试要点
- 即时通讯、在线教学、视频会议——服务器带宽计算说明与网络品质测试
- 如何在网页中添加MSN和QQ等即时通讯的链接？