1、导入websocket相关的依赖
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId> </dependency>
2、新建WebSocketStompConfig配置类,内容如下
package com.zx; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.web.socket.server.standard.ServerEndpointExporter; @Configuration public class WebSocketStompConfig { @Bean public ServerEndpointExporter serverEndpointExporter() { return new ServerEndpointExporter(); } }
3、新建WebSocketServer类,websocket服务端
package com.zx; import com.alibaba.fastjson.JSON; import com.zx.pojo.message; import org.apache.commons.logging.Log; import org.apache.commons.logging.LogFactory; import org.json.JSONObject; import org.springframework.beans.BeansException; import org.springframework.beans.factory.BeanFactory; import org.springframework.context.ApplicationContext; import org.springframework.context.ApplicationContextAware; import org.springframework.stereotype.Component; import org.springframework.web.socket.TextMessage; import javax.websocket.*; import javax.websocket.server.PathParam; import javax.websocket.server.ServerEndpoint; import javax.websocket.server.ServerEndpointConfig; import java.io.IOException; import java.util.concurrent.CopyOnWriteArraySet; @ServerEndpoint(value = "/websocket/{sid}", configurator = WebSocketServer.class) @Component public class WebSocketServer extends ServerEndpointConfig.Configurator implements ApplicationContextAware { private static final Log logger = LogFactory.getLog(WebSocketServer.class); private static int conCount = 0; private static CopyOnWriteArraySet<WebSocketServer> webSocketSet = new CopyOnWriteArraySet<WebSocketServer>(); private Session session; private String sid = ""; @OnOpen public void onOpen(Session session, @PathParam("sid") String sid) { WebSocketServer webSocketServer = new WebSocketServer(); // 设置长连接时间 session.setMaxIdleTimeout(60 * 60 * 1000); webSocketServer.session = session; webSocketServer.sid = sid; webSocketSet.add(webSocketServer); addOnlineCount(); logger.info("有一连接加入,当前在线人数为:" + getOnlineCount()); } @OnClose public void onClose(Session session) { for (WebSocketServer webSocketServer : webSocketSet) { if (webSocketServer.session.equals(session)) { webSocketSet.remove(webSocketServer); } } subOnlineCount(); logger.info("有一连接关闭,当前在线人数为:" + getOnlineCount()); } @OnMessage public void onMessage(String message, Session session) { logger.info("接收到消息:" + message); message a=JSON.parseObject(message,message.class); logger.info(a); sendMessage(a.getMessage(),a.getUser()); //sendToAll(message); logger.info("发送成功!"); } @OnError public void onError(Session session, Throwable error) { logger.error("发生错误"); error.printStackTrace(); } public void sendMessage(String message, String sid) { try { for (WebSocketServer webSocketServer : webSocketSet) { if (sid.equals(webSocketServer.sid)) { webSocketServer.session.getBasicRemote().sendText(message); } } } catch (IOException e) { e.printStackTrace(); } } public void sendToAll(String message) { try { for (WebSocketServer webSocketServer : webSocketSet) { webSocketServer.session.getBasicRemote().sendText(message); } } catch (IOException e) { e.printStackTrace(); } } private synchronized void addOnlineCount() { conCount++; } private synchronized int getOnlineCount() { return conCount; } private synchronized void subOnlineCount() { conCount--; } private static volatile BeanFactory context; @Override public <T> T getEndpointInstance(Class<T> clazz) throws InstantiationException { return context.getBean(clazz); } @Override public void setApplicationContext(ApplicationContext applicationContext) throws BeansException { WebSocketServer.context = applicationContext; } } 4、再编写2个html文件调用websocket.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1 style="text-align: center">张三</h1> <hr> <br><br> 输入内容:<input type="text" id="content" placeholder="请输入内容"> 输入接收人:<input type="text" id="user" placeholder="输入接收人"> <input type="button" value="发送消息" οnclick="sendMessage()"><br><br> <hr> <div id="aa"></div> <script> var socket; if (typeof (WebSocket) == "undefined") { console.log("您的浏览器不支持WebSocket"); } else { console.log("您的浏览器支持WebSocket"); //实现化WebSocket对象,指定要连接的服务器地址与端口 建立连接 socket = new WebSocket("ws://localhost:8090/websocket/zhangsan"); //socket = new WebSocket("ws://localhost:8090/websocket/20".replace("http", "ws")); //打开事件 socket.onopen = function () { console.log("Socket 已打开"); //socket.send("这是来自客户端的消息" + location.href + new Date()); }; //获得消息事件 socket.onmessage = function (msg) { console.log(msg.data); var aaa=document.getElementById("aa"); aaa.innerHTML +="<p style='text-align:left'>"+msg.data+"</p>" //发现消息进入 开始处理前端触发逻辑 }; //关闭事件 socket.onclose = function () { console.log("Socket已关闭"); }; //发生了错误事件 socket.onerror = function () { alert("Socket发生了错误"); //此时可以尝试刷新页面 } //离开页面时,关闭socket //jquery1.8中已经被废弃,3.0中已经移除 // $(window).unload(function(){ // socket.close(); //}); } function sendMessage(data) { var message=document.getElementById("content").value; var user=document.getElementById("user").value; var msg=document.getElementById("content"); var aaa=document.getElementById("aa"); aaa.innerHTML +="<p style='text-align: right'>"+message+"</p>" var con = {}; con["message"] = message, con["user"] = user; var json = JSON.stringify(con); // var data={ // "message":message, // "user":user, // }; //alert(json); socket.send(json); // alert(message); //socket.send(json); mag.innerHTML=""; //socket.send("发送一条消息!"); } </script> </body> </html>
5、这样就能实现简单的通信啦,来看看效果吧
想要源码的小伙伴可以私信我哦!