标签：websocket log spring boot 接口 session WebSocket public
第一步：导入依赖
相比前面的章节，新增了websocket的依赖。
编写后端：
第二步：编写WebSocketConfig配置类
@Configuration
public class WebSocketConf {
@Bean
public ServerEndpointExporter serverEndpoint(){
return new ServerEndpointExporter();
}
}
第三步：编写WebSocket类
//注册成组件
@Component
//定义websocket服务器端，它的功能主要是将目前的类定义成一个websocket服务器端。注解的值将被用于监听用户连接的终端访问URL地址
@ServerEndpoint("/websocket")
//如果不想每次都写private final Logger logger = LoggerFactory.getLogger(当前类名.class); 可以用注解@Slf4j;可以直接调用log.info
@Slf4j
public class WebSocket {
//实例一个session，这个session是websocket的session
private Session session;
//存放websocket的集合（本次demo不会用到，聊天室的demo会用到）
private static CopyOnWriteArraySet
//前端请求时一个websocket时
@OnOpen
public void onOpen(Session session) {
this.session = session;
webSocketSet.add(this);
log.info("【websocket消息】有新的连接, 总数:{}", webSocketSet.size());
}
//前端关闭时一个websocket时
@OnClose
public void onClose() {
webSocketSet.remove(this);
log.info("【websocket消息】连接断开, 总数:{}", webSocketSet.size());
}
//前端向后端发送消息
@OnMessage
public void onMessage(String message) {
log.info("【websocket消息】收到客户端发来的消息:{}", message);
}
//新增一个方法用于主动向客户端发送消息
public static void sendMessage(String message) {
for (WebSocket webSocket: webSocketSet) {
log.info("【websocket消息】广播消息, message={}", message);
try {
webSocket.session.getBasicRemote().sendText(message);
} catch (Exception e) {
e.printStackTrace();
}
}
}
}
有关方法和参数的描述代码里有简单写到。
第四步：改造控制器
编写一个接口方法，调用websocket的sendMessage方法，如下：
我是写在以前的codeController里面的，先注入websocket，再新增一个接口方法，如下：
ApiOperation注解是整合的swagger后的注解，没有跟着前面的章节整合不需要加，为了显示效果，我增加了一个线程睡眠0.1秒再累加，返回前端。
注意：若前面跟着一起整合了token，直接访问该接口不行，要么请求时带上登录接口返回的token，要么放行该接口，为了简单，此处我直接放行的该接口，若未整合token，则不需要管，放行方式如下：
在该配置类下面的该方法增加如图所示（未整合token不需要管）。
到此后端完毕，开始编写前端代码。
编写前端：
第五步：编写前端代码
1、
var websocket = null;
//判断当前浏览器是否支持WebSocket
if('WebSocket' in window){
websocket = new WebSocket("ws://localhost:8089/websocket");
}else{
alert('Not support websocket')
}
首先建立websocket连接。
注意：此处的地址的ws://是固定写法，后面加上你的ip+端口+WebSocket的ServerEndpoint注解配置的路径。
2、
//连接发生错误的回调方法
websocket.onerror = function(){
setMessageInnerHTML("发生错误");
};
//连接成功建立的回调方法
websocket.onopen = function(event){
setMessageInnerHTML("建立连接");
}
//接收到消息的回调方法
websocket.onmessage = function(event){
console.log(event.data)
// setMessageInnerHTML(event.data);
$(".progress-bar").attr("style","width:"+event.data+"%")
}
//连接关闭的回调方法
websocket.onclose = function(){
setMessageInnerHTML("关闭连接");
}
都是websocket的固定写法，几个回调函数。
3、
//开始
$("#btn").click(function(){
$.ajax({
url: "http://localhost:8089/codeController/jinDuTiao",
type:'post',
success: function(HTML) {//返回页面内容
console.log(HTML);
}
});
})
开始按钮，开始请求接口。
注意：此处为了样式好看点，我导入了bootstrap。运行服务，打开网页，会自动建立websocket连接，点击开始。
第六步：演示
第七步：改造
为了体现后端主动向服务器传数据，新增一个接口，如下：
将上面那个接口改成新增成一个定时执行的，会发现，不点击前端的开始按钮，也会有效果，说明后端可以主动向客户端发送数据。
到此，整合完毕。
本期整合到此完毕，接下来会继续更新加强整合，尽情期待。
标签：websocket,log,spring,boot,接口,session,WebSocket,public 来源： https://www.cnblogs.com/cfas/p/16445035.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。