在项目中用到了应用WebSocket记录用户的学习记录。在这里记录下来
前端代码:
//开启Socket记录
function learningRecords() {
//实现化WebSocket对象,指定要连接的服务器地址与端口
socket = new WebSocket("ws://127.0.0.1:8084/LearnExamination/ws/"+userId);
//打开事件
socket.onopen = function() {
//socket.send("这是来自客户端的消息" + location.href + new Date());
/* toastr.info('开始记录本次学习');*/
};
//获得消息事件
socket.onmessage = function(msg) {
setTimeout(function(){
//实时监测用户读取的进度
save();
},1000);
};
//关闭事件
socket.onclose = function() {
alert("Socket已关闭");
};
//发生了错误事件
socket.onerror = function() {
alert("Socket发生了错误,本次观看将不记录。");
}
}
save方法:
function save() {
var data={};
/*资料的id*/
data.dataId = dataId;
/*资料的阅读时长*/
data.viewLength = currentTime;
/*资料的进度*/
data.viewIndex = Math.round((currentTime/duration)*100)+"%";
/*阅读资料的用户Id*/
data.createBy = userId;
/*得到阅读的时间*/
data.createTime = getTodayDate();
socket.send(JSON.stringify(data));
/* socket.close();//关闭socket*/
}
后端代码:
package com.controller;
import com.pojo.generator.TeDataView;
import com.service.TeDataViewService;
import net.sf.json.JSONObject;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.socket.server.standard.SpringConfigurator;
import java.util.Set;
import java.util.concurrent.CopyOnWriteArraySet;
import javax.websocket.CloseReason;
import javax.websocket.OnClose;
import javax.websocket.OnError;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
/**
* Created by CC on 2018/2/10.
*/
@RestController
@ServerEndpoint(value = "/ws/{user}",configurator = SpringConfigurator.class)
public class WSServer {
public Logger logger = LoggerFactory.getLogger(this.getClass());
private static final Set<WSServer> connections =
new CopyOnWriteArraySet<WSServer>();
private String currentUser;
private TeDataView teDataView;
@Autowired
private TeDataViewService teDataViewService;
//连接打开时执行
@OnOpen
public void onOpen(@PathParam("user") String user, Session session) {
currentUser = user;
connections.add(this);
logger.error("Connected ... " + session.getId());
//把新的连接数据保存在redis里面去。通过userId+session.getId();
}
//收到消息时执行
@OnMessage
public String onMessage(String message, Session session) {
logger.error(currentUser + ":" + message);
JSONObject jsonobject = JSONObject.fromObject(message);
teDataView=(TeDataView) JSONObject.toBean(jsonobject, TeDataView.class);
return currentUser + ":" + message;
}
//连接关闭时执行
@OnClose
public void onClose(Session session, CloseReason closeReason) {
//表示用户已经没有看资料了。存进数据库
connections.remove(this);
/* System.out.println(String.format("Session %s closed because of %s", session.getId(), closeReason));
System.out.println("数据打印:"+teDataView.getViewLength());*/
try {
logger.error(currentUser + ":" + teDataView.toString());
teDataViewService.saveDataView(teDataView);
} catch (Exception e) {
e.printStackTrace();
}
}
//连接错误时执行
@OnError
public void onError(Throwable t) {
/* t.printStackTrace();*/
}
}
需要注意的是在WebSocket服务端依赖注入service时,需要添加jar包
第一步 :在pom.xml文件中添加 jar 包
<!--websocketJar-->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-websocket</artifactId>
<version>4.0.0.RELEASE</version>
</dependency>
第二步 :在服务端添加configurator = SpringConfigurator.class
@ServerEndpoint(value = "/ws/{user}",configurator = SpringConfigurator.class)