WebSocket应用原理：使用springboot和vue快速应用测试

WebSocket是在http协议之上的一种全双工、持久化通信协议，一些原理介绍这里就不在赘述了，想看的小伙伴可以自行百度，我这里就直接贴代码上实战了，在实战中来分析原理。

我们本次前端采用的是WebSocket对象API，相关doc在这里
WebSocket API

在开始之前我们需要知道，WebSocket是基于事件驱动的，什么叫事件驱动？简单说就是，由特定的动作事件来触发，例如js中的onclick，onmouseover等事件句柄，再例如Java GUI编程中的onButtonClick等等都是事件驱动类型，我们可以在这些驱动函数中定义逻辑，它会由该动作自动的触发调用。

服务端：
采用SpringBoot，方便导依赖，直接引入websokcet依赖即可，spring已经封装好了启动器

<dependency>
   <groupId>org.springframework.boot</groupId>
   <artifactId>spring-boot-starter-websocket</artifactId>
</dependency>

接下来新建一个配置类，用来初始化服务端socket对象：

@Configuration
public class WebSocketConfig {

    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }

}

接着开始真正的业务，像新建一个Controller一样简单：

package com.baoyun.ins.server;


import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;
import org.springframework.stereotype.Component;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.websocket.*;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.Map;
import java.util.concurrent.ConcurrentHashMap;

/**
 * @author cola
 * @date 2020/7/24 16:51
 * @description
 */

@Component
@ServerEndpoint("/chat")  // 标记为服务端
public class WebChat {

    /**
     * 全部在线会话  PS: 基于场景考虑 这里使用线程安全的Map存储会话对象。
     */
    private static Map<String, Session> onlineSessions = new ConcurrentHashMap<>();

    /**
     * 计数器
     */
    private static int count = 0;

    /**
     * 打开连接触发
     * @param session
     */
    @OnOpen
    public void onOpen(Session session) {
        onlineSessions.put(session.getId(), session);
        System.out.println("当前在线人数：" + onlineSessions.size() + "，本次session_id：" + session.getId());
        onlineSessions.forEach((id, session1) -> {
            System.out.println("socket==>所有客户端id：" + id);
        });
        sendMessageToAll(session.getId() + " 号客户端进入了聊天室");
    }


    /**
     * 收到消息触发
     * @param session
     * @param msg
     */
    @OnMessage
    public void onMessage(Session session, String msg) {
        count++;
        System.out.println("socket==>" + session.getId() + " 号客户端发送消息：" + msg);
        sendMessageToAll("服务端回复的消息：" + count);
    }


    /**
     * 关闭连接触发
     * @param session
     */
    @OnClose
    public void onClose(Session session) {
        onlineSessions.remove(session.getId());
        System.out.println("socket==>" + session.getId() + "关闭了连接");
        sendMessageToAll("socket==>" + session.getId() + "退出了聊天室");
    }


    /**
     * 连接异常触发
     * @param th
     */
    @OnError
    public void onError(Throwable th) {
        th.printStackTrace();
    }

    /**
     * 公共方法：发送信息给在线所有人，即所有session
     */
    private static void sendMessageToAll(String msg) {
        // 遍历所有session，群发消息
        onlineSessions.forEach((id, session) -> {
            try {
                session.getBasicRemote().sendText(msg);
            } catch (IOException e) {
                e.printStackTrace();
            }
        });
    }

}

客户端：
主要的socket逻辑

import {wsURL} from './const';
import store from '../store/index'

let socket = new WebSocket(wsURL)

// socket初始化
export const init = () => socket = new WebSocket('ws://localhost:10000/websocket/chat')

// 回调：打开连接
socket.onopen = () => {
  console.log('socket==>打开连接');
}

// 回调：接收服务端消息
socket.onmessage = (event) => {
  console.log('socket==>客户端接受了服务器的消息：', event.data)
  // ...缓存动作等等
}

// 回调：关闭连接
socket.onclose = () => {
  console.log('socket==>关闭连接')
}

// 回调：socket异常
socket.onerror = () => {
  console.log('socket==>发生异常')
}

// 发送消息
export const send = (msg) => {
  socket.send(msg)
}

// 关闭连接
export const close = () => {
  socket.close()
}

这里逐个解析：
可以看到我们在js中定义导出了3个函数，init,send和close

• init：这个函数用来手动初始化socket，关闭socket之后可以在这里重新打开一个socke
• send：客户端发送消息
• close：关闭socket

而on开头的回调函数和我们服务端的一样，事件回调自动触发，这里不再赘述。

下面是页面：

<template>
  <div class="chat">
    <el-button type="success" @click="open">打开socket</el-button>
    <el-button type="primary" @click="send">发送消息</el-button>
    <el-button type="warning" @click="close">关闭socket</el-button>
  </div>
</template>

<script>

import {init, send, close} from '../commons/websocket'

export default {
  name: 'Chat',
  data() {
    return {
      b: 0
    }
  },
  methods: {
    open() {
      init()
    },
    send() {
      this.b++
      send('我是客户端，我主动发送的消息' + this.b)
    },
    close() {
      close()
    }
  }
}
</script>

接下来进行演示分析

客户端初次打开连接：

服务端打开连接，注意，这里服务端主动了发送一个消息，所以客户端在onmessage监听到了消息进行打印

客户端继续发消息，服务端接收并发送给所有人


接下来关闭socket
这时候再发送消息就会报错提示socket正在关闭或已关闭


当我们需要再次发送消息时则需要在打开一个socket连接

总结：websocket是一个全双工通信协议，协议头为 ws:// 或 wss:// 对应的是 htpp:// 和 https:// ，大家可以观察一下请求头，可以看做是http协议的升级，因为websocket的握手分手都需要http协议实现。