–在以往我们前后端通讯经常通过http接口来请求访问，当后端数据发生改变后，前端页面是无法感知的，只能通过不断地轮训请求后端接口，后端接口再去查询数据库从而返回给前端，这种方法虽然简单，但是非常消耗资源，毕竟每次请求都是需要经过三次tcp的，所以我们可以采取另一种方法，采用WebSocket的模式，前后端建立一个长连接，只要后端业务发生改变，立即想前端主动发送消息，来实现前端无感知刷新数据，接下来就讲解一下具体步骤！

第一步、创建一个后端WebSocket服务端

/**
 * websocket
 * @author wfeil211@foxmail.com
 */
@Component  // 交给IOC容器
@ServerEndpoint("/webSocket")   // 这里的路径即前端连接的路径
public class WebSocketService {
    // 定义属性
    private Session session;
    //创建一个set用来存储用户
    private static CopyOnWriteArraySet websockets = new CopyOnWriteArraySet<>();
    /**
     * 当有用户创建连接时候调用该方法
     */
    @OnOpen
    public void onOpen(Session session) {
        // 给当前的Session赋值
        this.session = session;
        // 将当前对象添加到CopyOnWriteArraySet 中
        websockets.add(this);
        // 可以获取该session，但是其实也是一个内存地址
        System.err.println("【建立连接】 用户为：" + this.session);
        // 获取总数，这个不难理解，实际上这个集合的总数，就是WebSocket连接的总数
        System.err.println("【建立连接】 总数为：" + websockets.size());
    }
    /**
     * 有用户连接断开时候触发该方法
     */
    @OnClose
    public void onClose() {
        websockets.remove(this); // 将当前的对象从集合中删除
        System.err.println("【连接断开】 用户为：" + this.session);
        System.err.println("【连接断开】 总数为：" + websockets.size());
    }
    /**
     * 这个方法是客户端给服务端发送消息触发该方法
     * @param message ： 消息内容
     */
    @OnMessage
    public void onMessage(String message) {
        System.err.println("【收到客户端发的消息】：" + message);
    }
    /**
     * 发送消息的方法，方便后期别的service调用
     *
     * @param message 消息内容
     */
    public void sendMessage(String message) {
        for (WebSocketService websocket : websockets) {   // 遍历该Set集合
            System.err.println("广播消息 【给用户】 ：" + websocket + "发送消息" + "【" + message + "】"); // 获取一个，在控制台打印一句话
            try {
                websocket.session.getBasicRemote().sendText(message); // 发送消息的方法
            } catch (IOException e) {
                e.getMessage();
            }
        }
    }
}

第二步、编写前端JavaScript代码

let webSocket = null;   // 创建一个变量
if ('WebSocket' in window){  // 判断当前的浏览器是否支持WebSocket
    // 如果支持则创建一个WebSocket赋值给刚才创建的变量
    // 后面的路径实际上就是一次请求，但是这里用的是WebSocket协议
    let host = window.location.protocol+"//"+window.location.host+"/";
    let serverip = host.replace('https','wss').replace('http','ws');
    webSocket = new WebSocket(serverip + 'webSocket');
}else{  // 如果不兼容则弹框，该浏览器不支持
    alert('该浏览器不支持')
}
/**
 * 当WebSocket创建连接(初始化)会触发该方法
 */
webSocket.onopen = function (event){
    console.log('建立连接') // 这个代表在浏览器打印日志，跟Java的System.out.println()意思一致
}
/**
 * 当WebSocket关闭时候会触发该方法
 */
webSocket.onclose = function (event){
    console.log('关闭连接') // 同上
}
/**
 * 当WebSocket接受消息会触发该方法
 */
webSocket.onmessage = function (event){
    console.log('收到消息：'+event.data)
    let parse = JSON.parse(event.data);
    // 处理我们的业务
}
/**
 * 当WebSocket连接出错触发该方法
 */
webSocket.onerror = function (event){
    console.log('websocket发生错误',event);
}
/**
 * 页面关闭，WebSocket关闭
 */
window.onbeforeunload = function (){
    webSocket.close();
}

第三步、编写Vue代码

methods: {
    /**
     * 初始化webSocket连接
     * */
    initWebSocket() {
        if (typeof WebSocket === "undefined") {
            alert("您的浏览器不支持socket");
        } else {
            // 实例化socket
            let host = window.location.protocol+"//"+window.location.host+"/";
    		let serverip = host.replace('https','wss').replace('http','ws');
            this.socket = new WebSocket(serverip + 'webSocket');
            // 监听socket连接
            this.socket.onopen = function (evt) {
                //alert('连接服务组件成功！');
                console.log("连接成功！");
            };
            // 监听socket错误信息
            this.socket.onerror = function (evt) {
                console.log("ERROR: " + evt.data);
            };
            // 监听socket消息
            this.socket.onmessage = this.getMessage;
        }
    },
    /**
     * 输入日志
     * */
    getMessage: function (msg) {
        let obj = JSON.parse(msg.data);
        console.log("收到消息：", obj);
        // 做我们的业务
    }
},
/**
 * 挂载
 */
mounted() {
     初始化webSocket
     this.initWebSocket();
}

第四步、启动前后端代码

• 后端发送消息代码

  @Autowired
  private WebSocketService  webSocket；
  @Test
  public void test(){
  	webSocket.sendMessage("后端发送了一条消息");
  }
  

  • 图片省略…

     此时当前后端都启动成功时，前端页面打开F12查看console页面时就可以看到  “连接成功” 字样，当后端发出消息时，也会打印 “收到消息...” 字样
    

  • 当然WebSocket还有非常多的功能，前端也可以向后端发送消息，后端也可以发送定向消息，有兴趣的朋友可以多多研究

    本次教程到这里就结束了，希望大家多多关注支持（首席摸鱼师 微信同号），持续跟踪最新文章吧~