添加依賴
<!-- websocket -->
<dependency>
<groupId>javax.websocket</groupId>
<artifactId>javax.websocket-api</artifactId>
<version>${websocket.version}</version>
<scope>provided</scope>
</dependency>
ChatServer后台類
package edu.nf.ws.server; import javax.websocket.OnClose; import javax.websocket.OnMessage; import javax.websocket.OnOpen; import javax.websocket.Session; import javax.websocket.server.PathParam; import javax.websocket.server.ServerEndpoint; import java.io.IOException; import java.io.UnsupportedEncodingException; import java.net.URLDecoder; import java.sql.Time; import java.util.Date; import java.util.Set; /** * @Author Eric * @Date 2018/12/5 * WebSocket服務端 */ @ServerEndpoint("/chat/server/{userName}") public class ChatServer { /** * 當有客戶端連接到服務端的時候就會調用這個方法 * session代表客戶端和服務端的一個連接會話對象， * 由容器負責創建和維護 * @param session * @param userName */ @OnOpen public void onOpen(Session session,@PathParam("userName") String userName) throws UnsupportedEncodingException { //userName=URLDecoder.decode(userName,"UTF-8"); System.out.println("有客戶端連接..."+userName); //將用戶名保存到當前用戶會話的屬性中（有點類似作用域的概念） session.getUserProperties().put("user",userName); } /** * 客戶端和服務器之間通信的方法， * 服務端每當接收客戶端的消息就會調用這個方法 * 注意：必須制定一個String類型的參數，表示接收到客戶的文本消息 * @param message * @param session */ @OnMessage public void onMessage(String message,Session session) throws IOException { System.out.println("接收消息..."+message); //將消息發給所有人 sendAllUser(message,session); } /** * 當客戶端關閉或者斷開連接時，服務端會調用此方法 */ @OnClose public void onClose(Session session) throws IOException { System.out.println("客戶失去連接..."); session.close(); } private void sendAllUser(String message,Session session) throws IOException { //獲取所有人的會話對象 Set<Session> users = session.getOpenSessions(); //獲取發送人 String sendUser = session.getUserProperties().get("user").toString(); //發送給所有人 for (Session user : users) { user.getBasicRemote().sendText(getTime()+"<br/>"+sendUser+":"+message); } } private Time getTime(){ //創建當前時間 Date date = new Date(); Time time = new Time(date.getTime()); return time; } }
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>簡易對話</title>
</head>
<body>
<div id="login_div">
用戶名：<input type="text" id="userName" name="userName"/>
<input type="button" id="login" value="login"/>
</div>
<div id="container" style="display: none">
<div id="content"></div>
<input type="text" id="msg" name="msg"/>
<input type="button" id="send" value="send"/>
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
$(function () {
var ws;
//登陸
$("#login").on("click",function () {
var userName = $("#userName").val();
//創建WebSocket對象並連接服務端
ws = new WebSocket('ws://localhost:8080/chat/server/'+userName);
//客戶端打開連接時會回調此方法
/*ws.onopen = function(){
//...
}*/
//客戶端關閉或斷開連接時執行此方法
/*ws.onclose = function(){
//...
}*/
//接收服務端發送的信息
ws.onmessage =function (message) {
$("#content").append(message.data+"<br/>")
}
$('#login_div').css('display','none');
$('#container').css('display','block');
});
//發送信息
$("#send").on('click',function () {
var msg = $('#msg').val();
//發送消息
ws.send(msg);
});
});
</script>
</body>
</html>