快速使用 - 消息增强器

一、后端实现

你也可以先选择熟悉Demo项目来学习这个框架（前往demo）

1. Maven项目导入该依赖。

<dependency>
    <groupId>io.github.zwzrt</groupId>
    <artifactId>message-plus</artifactId>
    <version>0.2.2-beta</version>
</dependency>

2. 启动类添加@EnableMessagePlus来启动增强器。

@SpringBootApplication
@EnableMessagePlus // 开启message增强
public class ChatTestApplication {
    public static void main(String[] args) {
        SpringApplication.run(ChatTestApplication.class, args);
    }
}

3. 实现MessagePlusBase接口

 /**
  * 消息接收实现类
  * @author mo
  **/
 @Slf4j
 @Service
 public class MessageUtil implements MessagePlusBase {
     /**
      * 连接建立成功调用的方法
      * @return 有返回，则使用返回值作为标识，否则使用sid作为标识
      */
     @Override
     public String onOpen(Session session, String sid) {
         System.out.println("连接成功");
         return sid;
     }
     /**
      * 连接关闭调用的方法
      */
     @Override
     public void onClose(String sid) {
         System.out.println("断开连接");
     }
     /**
      * 收到系统消息
      * @param senderId 发送者ID
      * @param message 消息内容
      */
     @Override
     public void onMessageBySystem(String senderId, String message) {
     }
     /**
      * 管理系统登录接口
      * @param username 用户名
      * @param password 密码
      * @return token
      */
     @Override
     public String login(String username, String password) {
         if ("123456".equals(username) && "123456".equals(password)) {
             return "123456";
         } else return null;
     }
 }

4. 然后启动服务即可，随后进入前端的开发工作吧！

二、前端实现

1. WebSocket连接后端

// 我的ID
var MY_ID = 1;
// 套接字
var websocket = null;

//判断当前浏览器是否支持WebSocket
if('WebSocket' in window) {
    //改成你的地址
    websocket = new WebSocket("ws://localhost:8080/messageplus/ws/"+MY_ID);
} else {
    alert('当前浏览器 Not support websocket')
}

//连接发生错误的回调方法
websocket.onerror = function() {
    console.log("WebSocket连接发生错误");
};
//连接成功建立的回调方法
websocket.onopen = function() {
    console.log("WebSocket连接成功");
}
//接收到消息的回调方法
websocket.onmessage = function(event) {
   console.log("有一条消息："+event.data);
}
//连接关闭的回调方法
websocket.onclose = function() {
    console.log("WebSocket连接关闭");
}
//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口。
window.onbeforeunload = function() {
    closeWebSocket();
}

2. 发送消息

axios({
   method: "post",
   url: "http://localhost:8080/messageplus/single/send",
   headers: {
      'Content-Type': 'application/json;charset=UTF-8'
   },
   params: {
      id1: MY_ID, // 发送者ID
      id2: friendId, // 接收者ID
   },
   data: "我是消息"
}).then(resp => {}).catch(err => {});

3. 消息内容

服务器使用WebSocket返回消息，消息的内容为如下类型的JSON字符串，前端开发者可以使用JSON.parse()来转换为对象：

{
    "code":       "200", // 消息编码
    "type":       "",    // 消息类型
    "senderId":   "",    // 发送者ID
    "groupId:     "",    // 群组ID
    "receiverId": "",    // 接收者ID
    "data":       ""     // 消息内容
}

消息类型有多种，可以通过对象的’type’属性来判断类型，其结果有一下几种：

SINGLE_SHOT    // 单聊
MASS_SHOT      // 群组
SYSTEM_SHOT    // 系统
CHAT_ROOM_SHOT // 聊天室

4. 使用第一个步骤建立两个连接后，就可以互相发送消息了