基于SpringBoot+WebSocket搭建一个简单的多人聊天系统

前言

  今天闲来无事，就来了解一下websocket协议。来简单了解一下吧。

websocket是什么

  首先了解一下websocket是什么？websocket是一种在单个tcp连接上进行全双工通信的协议。这是一种比较官方的说法，简单点来说就是，在一次tcp连接中，通信的双方可以相互通信。比如a和b在打电话，a说话的时候，b也可以说话来进行信息的交互，这就叫做全双工通信。对应的是单工通信，和半双工通信，单工通信就是只能由a向b通信，比如电脑和打印机。半双工通信是可以ab可以互相通信，但是同一时间只能进行单向通信，比如对讲机。

websocket与http有啥区别

相同点

  都建立在tcp之上，通过tcp协议来传输数据。

不同点

  http协议为单向协议，即浏览器只能向服务器请求资源，服务器才能将数据传送给浏览器，而服务器不能主动向浏览器传递数据。分为长连接和短连接，短连接是每次http请求时都需要三次握手才能发送自己的请求，每个request对应一个response；长连接是短时间内保持连接，保持tcp不断开，指的是tcp连接。

  websocket一种双向通信协议，在建立连接后，websocket服务器和客户端都能主动的向对方发送或接收数据，就像socket一样，不同的是websocket是一种建立在web基础上的一种简单模拟socket的协议；websocket需要通过握手连接，类似于tcp它也需要客户端和服务器端进行握手连接，连接成功后才能相互通信。websocket在建立握手连接时，数据是通过http协议传输的，“get/chat http/1.1”，这里面用到的只是http协议一些简单的字段。但是在建立连接之后，真正的数据传输阶段是不需要http协议参与的。

用处

  websocket解决客户端发起多个http请求到服务器资源浏览器必须要经过长时间的轮询问题。

使用websocket搭建一个多人聊天系统

1. 引入websocket的jar包

gradle：

compile group: 'org.springframework.boot', name: 'spring-boot-starter-websocket', version: '2.1.8.release'

maven：

<dependency>
    <groupid>org.springframework.boot</groupid>
    <artifactid>spring-boot-starter-websocket</artifactid>
    <version>2.1.8.release</version>
</dependency>

1. 添加对websocket的支持

  注入serverendpointexporter，这个bean会自动注册使用了@serverendpoint注解声明的websocket endpoint。

import org.springframework.context.annotation.bean;
import org.springframework.context.annotation.configuration;
import org.springframework.web.socket.server.standard.serverendpointexporter;

/**
 * @author: zp
 * @date: 2019-09-18 10:03
 * @description:
 */
@configuration
public class appconfiguration {

    @bean
    public serverendpointexporter serverendpointexporter(){
        return new serverendpointexporter();
    }

}

1. 创建websocket的实现类

  @serverendpoint("/websocket/{page}")中的值就是需要访问的地址，和controller中的@requestmapping有点类似。然后实现@onopen（打开连接）,@onclose（关闭连接）,@onmessage（收到消息）,@error（触发异常）。

import org.slf4j.logger;
import org.slf4j.loggerfactory;
import org.springframework.stereotype.component;

import javax.websocket.*;
import javax.websocket.server.pathparam;
import javax.websocket.server.serverendpoint;
import java.io.ioexception;
import java.util.map;
import java.util.set;
import java.util.concurrent.concurrenthashmap;
import java.util.concurrent.copyonwritearrayset;
import java.util.concurrent.atomic.atomicinteger;

/**
 * @author: zp
 * @date: 2019-09-20 15:12
 * @description:
 */
@component
@serverendpoint("/websocket/{page}")
public class websocket {
    private logger log = loggerfactory.getlogger(this.getclass());

    /**
     * 用来记录房间的人数
     */
    private static atomicinteger onlinepersons = new atomicinteger(0);

    /**
     * 用来记录房间及人数
     */
    private static map<string,set> roommap = new concurrenthashmap(8);

    @onopen
    public void open(@pathparam("page") string page, session session) throws ioexception {
        set set = roommap.get(page);
        // 如果是新的房间，则创建一个映射，如果房间已存在，则把用户放进去
        if(set == null){
            set = new copyonwritearrayset();
            set.add(session);
            roommap.put(page,set);
        }else{
            set.add(session);
        }
        // 房间人数+1
        onlinepersons.incrementandget();
        log.info("新用户{}进入聊天,房间人数:{}",session.getid(),onlinepersons);
    }

    @onclose
    public void close(@pathparam("page") string page, session session){
        // 如果某个用户离开了，就移除相应的信息
        if(roommap.containskey(page)){
            roommap.get(page).remove(session);
        }
        // 房间人数-1
        onlinepersons.decrementandget();
        log.info("用户{}退出聊天,房间人数:{}",session.getid(),onlinepersons);
    }

    @onmessage
    public void reveivemessage(@pathparam("page") string page, session session,string message) throws ioexception {
        log.info("接受到用户{}的数据:{}",session.getid(),message);
        // 拼接一下用户信息
        string msg = session.getid()+" : "+ message;
        set<session> sessions = roommap.get(page);
        // 给房间内所有用户推送信息
        for(session s : sessions){
            s.getbasicremote().sendtext(msg);
        }
    }

    @onerror
    public void error(throwable throwable){
        try {
            throw throwable;
        } catch (throwable e) {
            log.error("未知错误");
        }
    }
}

写个超级简单的页面测试一下

  前端有点菜，写不出好看的ui，见谅～

<html>
<head>
    <meta charset="utf-8"></meta>
    <title>springboot项目websocket测试demo</title>
</head>
<body>
<h3>springboot项目websocket测试demo</h3>
<h4>测试说明</h4>
<h5>文本框中数据数据，点击‘发送测试’，文本框中的数据会发送到后台websocket，后台接受到之后，会再推送数据到前端，展示在下方；点击关闭连接，可以关闭该websocket；可以跟踪代码，了解具体的流程；代码上有详细注解</h5>
<br />
<input id="text" type="text" />
<button onclick="send()">发送测试</button>
<hr />
<button onclick="clos()">关闭连接</button>
<hr />
<div id="message"></div>
<script>
    var websocket = null;
    if('websocket' in window){
        websocket = new websocket("ws://127.0.0.1:9999/websocket/1");
    }else{
        alert("您的浏览器不支持websocket");
    }
    websocket.onerror = function(){
        setmessageinhtml("send error！");
    }
    websocket.onopen = function(){
        setmessageinhtml("连接成功！")
        settimeout(function(){setmessageinhtml("欢迎来到这里！")
    },2000)
    }
    websocket.onmessage = e => setmessageinhtml(e.data)
    websocket.onclose = function(){
        setmessageinhtml("连接断开！")
    }
    window.onbeforeunload = function(){
        clos();
    }
    function setmessageinhtml(message){
        document.getelementbyid('message').innerhtml += message+"</br>";
    }
    function clos(){
        websocket.close(3000,"强制关闭");
    }
    function send(){
        var msg = document.getelementbyid('text').value;
        websocket.send(msg);
    }
</script>
</body>
</html>

测试

后记

  希望我们每天都有一点小收获～