简介

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

HTTP协议在浏览器和服务器交互时，在完成一次数据传输后，就会断开。并且只能由浏览器向服务器发出请求，因此在需要实时更新时，只能利用Ajax进行轮询，频繁连接服务器。

webSocket则只需要进行一次连接后，就可以一直相互发送数据。

1607586397190.png

其中websocket中http连接和普通的http连接有所不同，

客户端向服务器发出HTTP请求：

GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13
Origin: http://example.com

其中关注：

Upgrade: websocket
Connection: Upgrade
这是告诉服务器，升级为websocket请求

服务器向客户端回复

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=
Sec-WebSocket-Protocol: chat

这样就完成了websocket连接。

简易聊天室

简易聊天室——大体流程：

（1）用户输入用户名和密码，点击登录

（2）后台UserController.login将用户名存入HttpSession,跳转到message.html页面

(3)进入message.html页面，建立websocket连接，后台响应onOpen事件，从EndpointConfig中取出HTTPSession，然后在从httpSession中取出用户名，然后以用户名为key,该websocket对象为值，存入onLineUsers中。

（4）用户输入要发送人的用户名和消息，点击发送。ajax带着表单信息请求到后台sendMessage接口，后台根据要发送的用户名，在onLineUsers中取出相应的websocket对象，进行消息发送。

（5）被发送用户，响应onmessage事件，将消息弹窗显示

服务器端

依赖：

<dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-websocket</artifactId>
        </dependency>
    </dependencies>

首先，新建webSocket的配置类：

import org.springframework.context.annotation.Bean;
import org.springframework.stereotype.Component;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;

/**
 * @author yuanwei
 * @date 2020/12/8 17:21
 * @description
 */
@Component
public class WebSocketConfig {
    @Bean
    public ServerEndpointExporter serverEndpointExporter(){
        return new ServerEndpointExporter();
    }
}

接着构建websocket事件类

import com.example.websocket.config.GetHttpSessionConfig;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Component;

import javax.servlet.http.HttpSession;
import javax.websocket.EndpointConfig;
import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;
import java.util.Map;
import java.util.concurrent.ConcurrentHashMap;

/**
 * @author yuanwei
 * @date 2020/12/8 18:01
 * @description
 */
@Component
@ServerEndpoint(value="/webSocket",configurator = GetHttpSessionConfig.class)
@Slf4j
public class WebSocket {

    private Session session;

    private static Map<String,WebSocket> onLineUsers=new ConcurrentHashMap<>();

    private HttpSession httpSession;

    @OnOpen
    public void onOpen(Session session, EndpointConfig endpointConfig){
        this.session = session;
        this.httpSession = (HttpSession) endpointConfig.getUserProperties().get(HttpSession.class.getName());
        onLineUsers.put((String)this.httpSession.getAttribute("user"),this);
        log.info("【websocket消息】有新的连接，总数：{}",onLineUsers.size());
    }

    @OnClose
    public void onClose(EndpointConfig endpointConfig){
        onLineUsers.remove(this.httpSession.getAttribute("user"));
        log.info("【websocket消息】连接断开，总数：{}",onLineUsers.size());
    }

    @OnMessage
    public void onMessage(String message){
        log.info("【websocket消息】收到客户端发来的消息：{}",message);
    }

    public void sendMessage(String toUsername,String message){
        try{
            if(onLineUsers.containsKey(toUsername)){
                onLineUsers.get(toUsername).session.getBasicRemote().sendText(message);
            }
        }catch (Exception e){
            e.printStackTrace();
        }
    }

}

UserController:只为区分不同用户，不进行校验用户名和密码

@Controller
public class UserController {

    @PostMapping("/login")
    public String login(String name, String password, HttpSession session){
        session.setAttribute("user",name);
        return "./message.html";
    }
}

WebSocketController:用于浏览器端发送消息

import com.example.websocket.service.WebSocket;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RestController;

/**
 * @author yuanwei
 * @date 2020/12/9 9:52
 * @description
 */
@RestController
public class WebSocketController {

    @Autowired
    private WebSocket webSocket;

    @PostMapping("/sendMessage")
    public void sendMessage(String toUsername,String message){
        try{
            webSocket.sendMessage(toUsername,message);
        }catch (Exception e){
            e.printStackTrace();
        }
    }
}

GetHttpSessionConfig:获取HttpSession,并将之存储在ServerEndpointConfig，以供websocket获取httpSession中的用户名。（如不需该操作，可省略）

import javax.servlet.http.HttpSession;
import javax.websocket.HandshakeResponse;
import javax.websocket.server.HandshakeRequest;
import javax.websocket.server.ServerEndpointConfig;

/**
 * @author yuanwei
 * @date 2020/12/10 17:22
 * @description
 */
public class GetHttpSessionConfig extends ServerEndpointConfig.Configurator {

    @Override
    public void modifyHandshake(ServerEndpointConfig sec, HandshakeRequest request, HandshakeResponse response) {
        HttpSession httpSession = (HttpSession) request.getHttpSession();
        sec.getUserProperties().put(HttpSession.class.getName(),httpSession);
    }
}

浏览器端

登录页面，只为其用户名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <title>Title</title>
</head>
<body>
    <div>
        <form class="form-horizontal" role="form" action="/login" method="post">
            <div class="form-group">
                <label for="name" class="col-sm-2 control-label">名字</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="name" name="name" placeholder="请输入名字">
                </div>
            </div>
            <div class="form-group">
                <label for="password" class="col-sm-2 control-label">密码</label>
                <div class="col-sm-10">
                    <input type="password" class="form-control" id="password" name="password" placeholder="请输入姓">
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="submit"  class="btn btn-default">登录</button>
                </div>
            </div>
        </form>
    </div>

</body>

</html>

发送消息页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
    <form role="form" action="/sendMessage" id="form1" method="post">
        <div class="form-group">
            <label for="firstname" class="col-sm-2 control-label">名字</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" name="toUsername" id="firstname" placeholder="请输入名字">
            </div>
        </div>
        <div class="form-group">
            <label for="message">文本框</label>
            <textarea class="form-control" name="message" id="message" rows="3"></textarea>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="button" id="mybutton"  class="btn btn-default">发送</button>
            </div>
        </div>
    </form>
</body>
<script>
    var websocket = null;
    if('WebSocket' in window){
        websocket = new WebSocket("ws://localhost:8080/webSocket");
    }else{
        alert("该浏览器不支持webSocket!");
    }

    websocket.onopen = function (event) {
        console.log("建立连接");
    }

    websocket.onclose = function (event) {
        console.log("连接关闭");
    }

    websocket.onmessage = function (event) {
        console.log("收到消息："+event.data);
        alert(event.data)
    }
    $("#mybutton").click(function(e){
        $.ajax({
            //几个参数需要注意一下
            type: "POST",//方法类型
            dataType: "json",//预期服务器返回的数据类型
            url: "/sendMessage" ,//url
            data: $('#form1').serialize()
        });
    });
</script>
</html>