Java端
/**
-
@ServerEndpoint 注解是一个类层次的注解,他的功能主要是将目前的类定义成一个websocket的服务器端
-
注解的值将被用于监听用户连接的终端访问URL地址,客户端可以通过这个URL来连接到WebSocker服务器端
-
*/ @ServerEndpoint("/websocket") public class WebSocketTest {
// 静态变量,用来记录当前在线连接数。应该把它设计成线程安全的 private static int onlinCount = 0; // concurrent包的线程安全set,用来存放每个客户端对应的MyWebsocket对象,若要实现服务器端和单 // 一客户端通信的话,可以使用Map来存放,其中key可以为用户名 private static CopyOnWriteArraySet<WebSocketTest> webSocketSet = new CopyOnWriteArraySet<WebSocketTest>();
// 与某个客户端的连接会话,需要通过它来给客户端发送数据 private Session session;
/**
-
连接建立成功调用的方法
-
@param session 可选的参数。session为与某个客户端的连接会话,通过它来给客户端发送数据
-
*/ @OnOpen public void onOpen(Session session) { this.session = session; webSocketSet.add(this); // 加入set中 addOnlineCount(); // 在线数+1
System.out.println(“有新连接加入!当前在线人数为:” + getOnlineCount());; }
/**
-
连接关闭时调用的方法
-
*/ @OnClose public void onClose() { webSocketSet.remove(this); // 从set中删除 subOnlineCount(); // 在线人数-1
System.out.println(“有一连接关闭!在线人数为:” + getOnlineCount()); }
/**
- 收到客户端消息后调用的方法
- @param message 客户端发送的消息
- @param session 可选的参数
- */ @OnMessage public void onMessage(String message, Session session) { System.out.println(“来自客户端的消息:” + message); // 群发消息 for(WebSocketTest item : webSocketSet) { try { item.sendMessage(message); } catch (Exception e) { e.printStackTrace(); continue; } } }
public void sendMessage(String message) throws IOException{ this.session.getBasicRemote().sendText(message); // this.session.getAsyncRemote().sendText(message); }
public static synchronized void addOnlineCount() { WebSocketTest.onlinCount++; }
public static synchronized void subOnlineCount() { WebSocketTest.onlinCount–; }
public static synchronized int getOnlineCount() { return onlinCount; } } <!DOCTYPE html> <html> <head> <meta charset=“UTF-8”> <title>Java后端Websocket的实现</title> </head> <body>
-
<input type=“text” id=“text”> <button onclick=“send()”>发送消息</button> <hr/>
<button onclick=“closeWebSocket()”>关闭WebSocket的连接</button> <hr/>
<div id=“message”></div> <script> var websocket = null;
// 判断浏览器是否支持WebSocket if(‘WebSocket’ in window){ websocket = new WebSocket(“ws://localhost:8080/websocket”); }else{ alert(“当前浏览器不支持WebSocket”); }
// 连接发生错误的回调方法 websocket.onerror = function(){ setMessageInnerHtml(“WebSocket连接发生错误!”); } // 连接成功建立的回调方法 websocket.onopen = function(){ setMessageInnerHtml(“WebSocket连接成功!”); }
// 收到消息的回调方法 websocket.onmessage = function(event){ setMessageInnerHtml(event.data); }
// 连接关闭的回调方法 websocket.onclose = function(){ setMessageInnerHtml(“WebSocket连接关闭!”); }
// 监听窗口关闭事件,当窗口关闭时,主动关闭websocket的连接,防止连接还没断开就关闭窗口,server端会抛出异常 window.onbeforeunload = function(){ closeWebSocket(); }
// 显示消息在网页上 function setMessageInnerHtml(message){ document.querySelector("#message").innerHtml += message + “<br>”; }
// 关闭WebSocket的连接 function closeWebSocket(){ websocket.close(); }
function send(){ var message = document.querySelector("#text").value; websocket.send(message); } </script> </body> </html>
在连接的时候通常会出现握手失败 302错误,主要问题是URL路径不对,可以参考下面路径的设置方法 websocket = new WebSocket(“ws://localhost:端口号/项目名称/websocket”)
在以上代码修改就可正常连接