前端頁面
<%@ 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">
<html>
<head>
<%@ include file="../../view/template_meta.jsp" %>
<%@ include file="../../view/template_css.jsp" %>
<%@ include file="../../view/template_js.jsp" %>
</head>
<body>
<%@ include file="../../view/template_menu.jsp" %>
<div id="page-wrapper" class="gray-bg">
<%@ include file="../../view/template_header.jsp" %>
<div class="wrapper wrapper-content animated fadeInRight">
<div class="row">
<div class="col-lg-12">
<div class="ibox float-e-margins">
<div class="ibox-content">
班次: <input id="routeId" >
用戶名: <input id="username">
<input type="button" value="登錄" onclick="login()" />
<br>
<br>
<textarea id="msg" placeholder="格式:@xxx#消息 , 或者@ALL#消息" style="width: 500px;height: 50px"></textarea>
<input type="button" onclick="sendText()" value="發(fā)送消息"> <br>
<textarea id="history" style="width: 500px;height: 200px ; max-lines: 10"></textarea>
<br/>
<br/>
<input type="file" id="file" />
<input type="button" onclick="sendFile()" value="發(fā)送文JIAN"> <br>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="../script/js/view/websocket/index.js"></script>
</html>
JS
var socket;
//登錄過后初始化socket連接
function login() {
var userId = $('#username').val();
var routeId = $('#routeId').val();
if (typeof(WebSocket) == "undefined") {
console.log("您的瀏覽器不支持WebSocket");
} else {
console.log("您的瀏覽器支持WebSocket/websocket");
}
//socket連接地址: 注意是ws協(xié)議
socket = new WebSocket("ws://192.168.1.102:9999/xxx/websocket/" + routeId + "/" + userId);
socket.onopen = function () {
console.log("Socket 已打開");
};
//獲得消息事件
socket.onmessage = function (msg) {
var histroy = $("#history").val();
$("#history").val(histroy + "\r\n" + msg.data);
console.log($(msg));
};
//關(guān)閉事件
socket.onclose = function () {
console.log("Socket已關(guān)閉");
};
//錯(cuò)誤事件
socket.onerror = function () {
alert("Socket發(fā)生了錯(cuò)誤");
}
$(window).unload(function () {
socket.close();
});
}
//點(diǎn)擊按鈕發(fā)送消息
function sendText() {
var message = {
type: 0,
content: $("#msg").val()
};
socket.send(JSON.stringify(message));
}
后臺(tái)代碼
public class WebSocketMessage {
private Integer type; //0.text 1.picture 2.volumn
private String content;
private String userId;
public String getUserId() {
return userId;
}
public void setUserId(String userId) {
this.userId = userId;
}
public Integer getType() {
return type;
}
public void setType(Integer type) {
this.type = type;
}
public String getContent() {
return content;
}
public void setContent(String content) {
this.content = content;
}
}
import com.gexin.fastjson.JSON;
import org.apache.commons.lang3.StringUtils;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Component;
import javax.websocket.*;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.io.InputStream;
import java.net.URLEncoder;
import java.util.Map;
import java.util.concurrent.ConcurrentHashMap;
@ServerEndpoint("/websocket/{routeId}/{userId}")
@Component
public class WebSocketServer {
public final static Logger logger = LoggerFactory.getLogger(WebSocketServer.class);
private final static Map<String, Map<String, WebSocketServer>> connectionMap = new ConcurrentHashMap<>();
private Session session;
private String userId;
private String routeId;
/**
* 連接建立成功調(diào)用的方法
*/
@OnOpen
public void onOpen(Session session, @PathParam("routeId") String routeId, @PathParam("userId") String userId) throws IOException {
if (!connectionMap.containsKey(routeId)) {
connectionMap.put(routeId, new ConcurrentHashMap<>());
}
connectionMap.get(routeId).put(userId, this);
this.session = session;
this.userId = userId;
this.routeId = routeId;
logger.info("連接成功:routeId:{} userId:{}", routeId, userId);
sendMessage(this.userId, "加入聊天", 0);
}
/**
* 連接關(guān)閉調(diào)用的方法
*/
@OnClose
public void onClose() throws IOException {
sendMessage(this.userId, "已退出聊天", 0);
if (!connectionMap.containsKey(routeId)) {
logger.info("線路{}聊天不存在.");
return;
}
if (!connectionMap.get(routeId).containsKey(userId)) {
logger.info("{}已退出線路{}聊天.", userId, routeId);
return;
}
connectionMap.get(routeId).remove(userId);
logger.info("關(guān)閉連接成功");
}
/**
* 收到客戶端消息后觸發(fā)的方法
*/
@OnMessage
public void onMessage(String message) throws IOException {
WebSocketMessage messageObj = JSON.parseObject(message, WebSocketMessage.class);
sendMessage(this.userId, messageObj.getContent(), messageObj.getType());
}
private void sendMessage(String userId, String content, Integer type) throws IOException {
Map<String, WebSocketServer> passengers = connectionMap.get(routeId);
if (passengers.size() == 0) {
return;
}
WebSocketMessage returnMsg = new WebSocketMessage();
returnMsg.setUserId(userId);
returnMsg.setContent(content);
returnMsg.setType(type);
String jsonStr = JSON.toJSONString(returnMsg);
for (Map.Entry<String, WebSocketServer> entry : passengers.entrySet()) {
entry.getValue().session.getBasicRemote().sendText(jsonStr);
}
}
@OnError
public void onError(Session session, Throwable error) {
error.printStackTrace();
}
}
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
