WebSocket的简单认识&SpringBoot整合websocket

1. 什么是WebSocket？菜鸟对websocket的解释如下

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

　　WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

　　在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。

　　现在，很多网站为了实现推送技术，所用的技术都是 Ajax 轮询(我目前接触的线上聊天也确实是基于这种方式实现的)。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。

　　HTML5 定义的 WebSocket 协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯

　　浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。

　　当你获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。

以下 API 用于创建 WebSocket 对象。

var Socket = new WebSocket(url, [protocol] );

WebSocket 属性

属性	描述
Socket.readyState	只读属性 readyState 表示连接状态，可以是以下值： 0 - 表示连接尚未建立。 1 - 表示连接已建立，可以进行通信。 2 - 表示连接正在进行关闭。 3 - 表示连接已经关闭或者连接不能打开。
Socket.bufferedAmount	只读属性 bufferedAmount 已被 send() 放入正在队列中等待传输，但是还没有发出的 UTF-8 文本字节数。

属性

描述

Socket.readyState

只读属性 readyState 表示连接状态，可以是以下值：

0 - 表示连接尚未建立。
1 - 表示连接已建立，可以进行通信。
2 - 表示连接正在进行关闭。
3 - 表示连接已经关闭或者连接不能打开。

Socket.bufferedAmount

只读属性 bufferedAmount 已被 send() 放入正在队列中等待传输，但是还没有发出的 UTF-8 文本字节数。

WebSocket 事件：

事件	事件处理程序	描述
open	Socket.onopen	连接建立时触发
message	Socket.onmessage	客户端接收服务端数据时触发
error	Socket.onerror	通信发生错误时触发
close	Socket.onclose	连接关闭时触发

WebSocket 方法：

方法	描述
Socket.send()	使用连接发送数据
Socket.close()	关闭连接

2. Tomcat中开发简单的WebSocket实例

　　在这里实现一个简易的聊天室。

开发环境：JDK7+Tomcat7.0.91(如果连接URL报404建议切换tomcat为高版本，我在7.0.88测试就连接不到后端)

最终效果如下：

代码如下：

后端：

package chat;

import java.io.IOException;

import java.util.HashMap;

import javax.websocket.OnClose;

import javax.websocket.OnError;

import javax.websocket.OnMessage;

import javax.websocket.OnOpen;

import javax.websocket.Session;

import javax.websocket.server.ServerEndpoint;

@ServerEndpoint("/chat")

public class ChatServer {

    private boolean first = true;

    private String name;

    private Session session;

    private static final HashMap<String, ChatServer> clientSet = new HashMap<String, ChatServer>();

    public ChatServer() {

        System.out.println("========ChatServer创建============");

    }

    /*

     * 客户端连接时触发该方法

     */

    @OnOpen

    public void onOpen(Session session) throws IOException {

        this.session = session;

    }

    /*

     * 客户端断开时触发该方法

     */

    @OnClose

    public void onClose() {

        clientSet.remove(name);

        String message = String.format("【%s %s】", name, "离开了聊天室！");

        broadcast(message);

    }

    /*

     * 客户端收到消息时触发该方法

     */

    @OnMessage

    public void onMessage(String msg) {

        if (first) {

            name = msg;

            clientSet.put(name, this);

            String message = String.format("【%s %s】", name, "加入了聊天室！");

            // 发送消息

            broadcast(message);

            first = false;

        } else {

            broadcast("【" + name + "】" + ":" + msg);

        }

    }

    // 当客户端通信出现错误时，激发该方法

    @OnError

    public void onError(Throwable t) throws Throwable {

        System.out.println("WebSocket服务端错误 " + t);

    }

    public void broadcast(String msg) {

        // 遍历服务器关联的所有客户端

        ChatServer client = null;

        for (String nickname : clientSet.keySet()) {

            try {

                client = (ChatServer) clientSet.get(nickname);

                synchronized (client) {

                    // 发送消息

                    client.session.getBasicRemote().sendText(msg);

                }

            } catch (IOException e) {

                System.out.println("聊天错误，向客户端 " + client + " 发送消息出现错误。");

                clientSet.remove(name);

                try {

                    client.session.close();

                } catch (IOException e1) {

                }

                String message = String.format("【%s %s】", client.name, "已经被断开了连接。");

                broadcast(message);

            }

        }

    }

}

前端：

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>简单聊天室</title>

<script type="text/javascript">

    var webSocket = null;

    if ("WebSocket" in window) {

        // 创建WebSocket对象

        webSocket = new WebSocket("ws://localhost:86/WebSocket/chat");

    } else {

        alert("您的浏览器不支持 WebSocket!");

    }

    var sendMsg = function() {

        var inputElement = document.getElementById('msg');

        if (inputElement.value == '')

            alert("输入内容不为空");

        else {

            if (inputElement.value == "quit" || inputElement.value == "exit") {

                webSocket.close();

                return;

            }

            // 发送消息

            webSocket.send(inputElement.value);

            // 清空单行文本框

            inputElement.value = "";

        }

    }

    var send = function(event) {

        if (event.keyCode == 13) {

            sendMsg();

        }

    };

    webSocket.onopen = function() {

        n = prompt('请给自己取一个昵称：');

        if (n != '' && n != null)

            webSocket.send(n);

        else

            //设置游客登录

            webSocket.send("游客" + Math.random() * 100000000000000000);

        // 此处可以加一个异步请求name是否使用的请求来判断name是否可用

        document.getElementById('msg').onkeydown = send;

        document.getElementById('sendBn').onclick = sendMsg;

    };

    // 为onmessage事件绑定监听器，接收消息

    webSocket.onmessage = function(event) {

        var show = document.getElementById('show')

        // 接收、并显示消息

        show.innerHTML += new Date() + "<br/>" + event.data + "<br/>";

        //让聊天框滚动条始终显示新消息

        show.scrollTop = show.scrollHeight;

    };

    webSocket.onclose = function() {

        document.getElementById('msg').onkeydown = null;

        document.getElementById('sendBn').onclick = null;

    };

</script>

</head>

<body>

    <div

        style="width: 600px; height: 240px; overflow-y: auto; border: 1px solid #333;"

        id="show"></div>

    <input type="text" size="80" id="msg" name="msg" placeholder="输入聊天内容" />

    <input type="button" value="发送" id="sendBn" name="sendBn" />

</body>

</html>

注意：

　　ws://localhost:86/WebSocket/chat 这个地址是协议://IP:Port/项目名称/websocket地址

第一次建立Socket连接的时候请求头和响应头如下：

Connection 必须设置 Upgrade，表示客户端希望连接升级。
Upgrade 字段必须设置 Websocket，表示希望升级到 Websocket 协议。
Sec-WebSocket-Key 是随机的字符串，服务器端会用这些数据来构造出一个 SHA-1 的信息摘要。把 “Sec-WebSocket-Key” 加上一个特殊字符串 “258EAFA5-E914-47DA-95CA-C5AB0DC85B11”，然后计算 SHA-1 摘要，之后进行 BASE-64 编码，将结果做为 “Sec-WebSocket-Accept” 头的值，返回给客户端。如此操作，可以尽量避免普通 HTTP 请求被误认为 Websocket 协议。
Sec-WebSocket-Version 表示支持的 Websocket 版本。RFC6455 要求使用的版本是 13，之前草案的版本均应当弃用。
Origin 字段是可选的，通常用来表示在浏览器中发起此 Websocket 连接所在的页面，类似于 Referer。但是，与 Referer 不同的是，Origin 只包含了协议和主机名称。
其他一些定义在 HTTP 协议中的字段，如 Cookie 等，也可以在 Websocket 中使用。

补充：上面是每个连接都会创建1个ChatServer对象，多例模式的对象。Session与HttpSession不一样。

3. SpringBoot中开启WebSocket

　　springboor整合websocket也非常简单。如下：

1. pom.xml增加如下依赖

        <!-- websocket的包 -->

        <dependency>

            <groupId>org.springframework.boot</groupId>

            <artifactId>spring-boot-starter-websocket</artifactId>

        </dependency>

2.代码如下

配置类：

package cn.qlq.config;

import org.springframework.context.annotation.Bean;

import org.springframework.context.annotation.Configuration;

import org.springframework.web.socket.server.standard.ServerEndpointExporter;

@Configuration

public class WebSocketConfig {

    @Bean

    public ServerEndpointExporter serverEndpointExporter() {

        return new ServerEndpointExporter();

    }

}

ChatServer.java

package cn.qlq.websocket;

import java.io.IOException;

import java.util.Hashtable;

import javax.websocket.OnClose;

import javax.websocket.OnError;

import javax.websocket.OnMessage;

import javax.websocket.OnOpen;

import javax.websocket.Session;

import javax.websocket.server.ServerEndpoint;

import org.springframework.stereotype.Component;

@ServerEndpoint("/chat")

@Component

public class ChatServer {

    private boolean first = true;

    private String name;

    private Session session;

    private static final Hashtable<String, ChatServer> clientSet = new Hashtable<String, ChatServer>();

    public ChatServer() {

        System.out.println("========ChatServer创建============");

    }

    /*

     * 客户端连接时触发该方法

     */

    @OnOpen

    public void onOpen(Session session) throws IOException {

        this.session = session;

    }

    /*

     * 客户端断开时触发该方法

     */

    @OnClose

    public void onClose() {

        clientSet.remove(name);

        String message = String.format("【%s %s】", name, "离开了聊天室！");

        broadcast(message);

    }

    /*

     * 客户端收到消息时触发该方法

     */

    @OnMessage

    public void onMessage(String msg) {

        if (first) {

            name = msg;

            clientSet.put(name, this);

            String message = String.format("【%s %s】", name, "加入了聊天室！");

            // 发送消息

            broadcast(message);

            first = false;

        } else {

            broadcast("【" + name + "】" + ":" + msg);

        }

    }

    // 当客户端通信出现错误时，激发该方法

    @OnError

    public void onError(Throwable t) throws Throwable {

        System.out.println("WebSocket服务端错误 " + t);

    }

    /**

     * 将此方法设计为静态方法用于服务器主动调用该方法广播消息

     *

     * @param msg

     */

    public static void broadcast(String msg) {

        // 遍历服务器关联的所有客户端

        ChatServer client = null;

        for (String nickname : clientSet.keySet()) {

            try {

                client = (ChatServer) clientSet.get(nickname);

                synchronized (client) {

                    // 发送消息

                    client.session.getBasicRemote().sendText(msg);

                }

            } catch (IOException e) {

                System.out.println("聊天错误，向客户端 " + client + " 发送消息出现错误。");

                clientSet.remove(nickname);

                try {

                    client.session.close();

                } catch (IOException e1) {

                }

                String message = String.format("【%s %s】", client.name, "已经被断开了连接。");

                broadcast(message);

            }

        }

    }

}

Controller层代码：

package cn.qlq.controller.websocket;

import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.ResponseBody;

import cn.qlq.websocket.ChatServer;

@RequestMapping("/chat")

@Controller

public class ChatController {

    /**

     * 跳转到聊天页面

     *

     * @return

     */

    @RequestMapping("/chatRoom")

    public String chatRoom() {

        return "websocket/chatRoom";

    }

    /**

     * http请求发送消息

     *

     * @param msg

     * @return

     */

    @RequestMapping("/sendMsg")

    public @ResponseBody String sendMsg(String msg) {

        ChatServer.broadcast(msg);

        return "success";

    }

}

前端页面：

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>简单聊天室</title>

<script type="text/javascript">

    var webSocket = null;

    if ("WebSocket" in window) {

        // 创建WebSocket对象

        webSocket = new WebSocket("ws://192.168.43.137:8088/chat");

    } else {

        alert("您的浏览器不支持 WebSocket!");

    }

    var sendMsg = function() {

        var inputElement = document.getElementById('msg');

        if (inputElement.value == '')

            alert("输入内容不为空");

        else {

            if (inputElement.value == "quit" || inputElement.value == "exit") {

                webSocket.close();

                return;

            }

            // 发送消息

            webSocket.send(inputElement.value);

            // 清空单行文本框

            inputElement.value = "";

        }

    }

    var send = function(event) {

        if (event.keyCode == 13) {

            sendMsg();

        }

    };

    webSocket.onopen = function() {

        n = prompt('请给自己取一个昵称：');

        if (n != '')

            webSocket.send(n);

        else

            //设置游客登录

            webSocket.send("游客" + Math.random() * 100000000000000000);

        // 此处可以加一个异步请求name是否使用的请求来判断name是否可用

        document.getElementById('msg').onkeydown = send;

        document.getElementById('sendBn').onclick = sendMsg;

    };

    // 为onmessage事件绑定监听器，接收消息

    webSocket.onmessage = function(event) {

        var show = document.getElementById('show')

        // 接收、并显示消息

        show.innerHTML += new Date() + "<br/>" + event.data + "<br/>";

        //让聊天框滚动条始终显示新消息

        show.scrollTop = show.scrollHeight;

    };

    webSocket.onclose = function() {

        document.getElementById('msg').onkeydown = null;

        document.getElementById('sendBn').onclick = null;

    };

</script>

</head>

<body>

    <div style="width: 600px; height: 240px; overflow-y: auto; border: 1px solid #333;" id="show"></div>

    <input type="text" size="80" id="msg" name="msg" placeholder="输入聊天内容" />

    <input type="button" value="发送" id="sendBn" name="sendBn" />

</body>

</html>

2.测试

http发送消息：

　　经测试，上面ChatServer也是多例模式，每次请求都会创建ChatServer实例对象。

Git地址：https://github.com/qiao-zhi/springboot-ssm