SpringMVC Websoket 測試網頁即時通訊
阿新 • • 發佈：2019-02-19
說明：測試專案是 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"/> <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.頁面展示效果
下面是兩個瀏覽器的實際測試效果
