springboot整合websocket（二）聊天室补充篇

springboot整合websocket（一）简单聊天室
 springboot整合websocket（二）聊天室补充篇

springboot整合websocket（三）上传文件（引导篇）
springboot整合websocket（四）上传文件（终篇）

这篇呢对上一篇聊天室做一个简单的补充，为下一篇文件上传做个铺垫

目标：

约定一个数据交换，对不同的字符串加以区分

为什么要这样呢？

因为我们的消息可能分很多种类型，比如说聊天、发送文件名给服务器（下一章会说到的）、或者其他业务需求的消息等等。

一、服务器端

1、引入fastjson（其他json解析包也可以）

这里我还用了lombok

<!--fastjson-->
<dependency>
    <groupId>com.alibaba</groupId>
    <artifactId>fastjson</artifactId>
    <version>1.2.76</version>
</dependency>

<!--lombok-->
<dependency>
    <groupId>org.projectlombok</groupId>
    <artifactId>lombok</artifactId>
    <optional>true</optional>
</dependency>

2、封装一个pojo

说明一下

operation 是用来标识类型的
msg 则是消息

@Data
@Builder
@NoArgsConstructor
@AllArgsConstructor
public class Message
{
    private String operation;
    private String msg;

    public Message setOperation(String operation)
    {
        this.operation = operation;
        return this;
    }

    public Message setMsg(String msg)
    {
        this.msg = msg;
        return this;
    }
}

3、修改OnMessage方法

说明一下

我这里去掉了OnOpen方法里面原有的东西
tip 是用来进入聊天室后保存用户名
msg是用来发送消息

@Log4j2
@Controller
@ServerEndpoint("/websocket")
public class BaseWebsocketController
{
    //onopen 在连接创建(用户进入聊天室)时触发
    @OnOpen
    public void openSession(Session session, EndpointConfig config)
    {
		//原来的东西去掉了
    }

    //响应字符串
    @OnMessage
    public void onMessage(Session session, String message)
    {
        //使用 fastjson 解析 json 字符串
        final Message data = JSONObject.parseObject(message, Message.class);
        //响应的信息
        final Message response = Message.builder()
                .operation(data.getOperation())         //将请求的 operation 放入
                .build();
        //根据不同的 operation 执行不同的操作
        switch (data.getOperation()) {
            //进入聊天室后保存用户名
            case "tip":
                session.getUserProperties().put("username", data.getMsg());
                sessions.put(session.getId(), session);
                response.setMsg("[" + data.getMsg() + "]进入房间");
                sendAll(JSONObject.toJSONString(response));
                break;
            //发送消息
            case "msg":
                final String username = (String) session.getUserProperties().get("username");
                response.setMsg("[" + username + "]" + data.getMsg());
                sendAll(JSONObject.toJSONString(response));
                break;
        }
    }
}

二、页面的改造

html不变，我这里就只放script的东西了

修改了 webSocket.onopen
修改了 webSocket.onMessage
修改了 $(’#sendBtn’).click()
添加了 function sendMessage(operation, msg){}

<script>
    let webSocket;
    //ip和端口号用自己项目的
    //{websocket}: 其实是刚刚那个@ServerEndpoint("/websocket")中定义的
    let url = 'ws://127.0.0.1:8080/websocket';
    
    $('#username').keyup(function (e) {
      let keycode = e.which;
      if (keycode == 13) {
        $('#joinRoomBtn').click();
      }
    });
    
    //进入聊天室
    $('#joinRoomBtn').click(function () {
      let username = $('#username').val();
      webSocket = new WebSocket(url);
      webSocket.onopen = function () {
        console.log('webSocket连接创建。。。');
        sendMessage('tip', username);
      }
      webSocket.onclose = function () {
        console.log('webSocket已断开。。。');
        $('#messageArea').append('websocket已断开\n');
      }
      webSocket.onmessage = function (event) {
        //这个 data 和刚刚的 Message 一样
        let data = {
          operation: '',
          msg: ''
        };
  
        data = JSON.parse(event.data);
        switch (data.operation){
          case "tip":
            $('#messageArea').append(data.msg + '\n');
            break;
          case "msg":     //显示消息
            $('#messageArea').append(data.msg + '\n');
            break;
        }
      }
      webSocket.onerror = function (event) {
        console.log(event)
        console.log('webSocket连接异常。。。');
      }
    });
    
    //退出聊天室
    $('#leaveRoomBtn').click(function () {
      if (webSocket) {
        //关闭连接
        webSocket.close();
      }
    });
    
    //发送消息
    $('#sendBtn').click(function () {
      var msg = $('#sendMessage').val();
      if (msg.trim().length === 0) {
        alert('请输入内容');
        return;
      }
      sendMessage('msg', $('#sendMessage').val());
      
      $('#sendMessage').val('');
    });
    
    //发送消息
    function sendMessage(operation, msg) {
      //这个 data 和刚刚的 Message 一样
      let data = {
        operation: operation,
        msg: msg,
      };
      
      //将 data 转成 json 字符串
      webSocket.send(JSON.stringify(data));
    }
  
  </script>