WebSocket使用

在项目中用到了应用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)