添加依赖
<!-- 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>