10.webSocket双工通讯的协议

2019-04-17 本文已影响0人王杰磊

1.webSocket

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

image.png

2.webSocket属性

socket.readyState(表连接状态)

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

Socket.bufferedAmount

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

3.webSocket事件

Socket.onopen:连接建立时触发
Socket.onmessage:客户端接收服务端数据时触发
Socket.onerror:通信发生错误时触发
Socket.onclose 连接关闭时触发

4.webSocket方法

Socket.send()：使用连接发送数据
Socket.close():关闭连接

webSocket实例

后台代码

添加依赖

<dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-websocket</artifactId>
        </dependency>

WebSocketConfig.java

/**
 * WebSocket的配置类
 * 开启了WebSocket支持
 */
@Configuration
public class WebSocketConfig {

    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }

}

WebSocketServer.java

//客户端向服务器端建立WebSocket连接的url
@ServerEndpoint("/websocket")
@Component
public class WebSocketServer {

    //静态变量，用来记录当前在线连接数,可选
    private static int onlineCount = 0;

    //concurrent包的线程安全Set，用来存放每个客户端对应的MyWebSocket对象，必须
    private static CopyOnWriteArraySet<WebSocketServer> webSocketSet
            = new CopyOnWriteArraySet<WebSocketServer>();

    //与某个客户端的连接会话，需要通过它来给客户端发送数据,必须
    private Session session;


    /**
     * 连接建立成功调用的方法
     */
    @OnOpen
    public void onOpen(Session session) {
        this.session = session;
        webSocketSet.add(this);     //将客户端加入set中
        addOnlineCount();           //在线数加1
        System.out.println("有新窗口开始监听,当前在线人数为"
                + getOnlineCount());
        try {
            sendMessage("连接成功");
        } catch (IOException e) {
            System.out.println("WebSocket IO异常");
        }
    }

    /**
     * 连接关闭调用的方法
     */
    @OnClose
    public void onClose() {
        webSocketSet.remove(this);  //从set中删除
        subOnlineCount();           //在线数减1
        System.out.println("有连接关闭！当前在线人数为" + getOnlineCount());
    }

    /**
     * 收到客户端消息后调用的方法
     *
     * @param message 客户端发送过来的消息
     */
    @OnMessage
    public void onMessage(String message, Session session) {
        System.out.println("收到客户端的信息:" + message);
        //群发消息
        for (WebSocketServer item : webSocketSet) {
            try {
                item.sendMessage(message);
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }

    /**
     * @param session
     * @param error
     */
    @OnError
    public void onError(Session session, Throwable error) {
        System.out.println("发生错误");
        error.printStackTrace();
    }

    /**
     * 实现服务器主动推送
     */
    public void sendMessage(String message) throws IOException {
        this.session.getBasicRemote().sendText(message);
    }


    /**
     * 群发自定义消息
     */
    public static void sendInfo(String message) throws IOException {
        System.out.println("推送消息内容:" + message);
        for (WebSocketServer item : webSocketSet) {
            try {
                item.sendMessage(message);
            } catch (IOException e) {
                continue;
            }
        }
    }

    public static synchronized int getOnlineCount() {
        return onlineCount;
    }

    public static synchronized void addOnlineCount() {
        WebSocketServer.onlineCount++;
    }

    public static synchronized void subOnlineCount() {
        WebSocketServer.onlineCount--;
    }
}

WebSocketController.java

@RestController
public class WebSocketController {

    //推送数据接口
    @GetMapping("/socket/push")
    public String pushMsg(String message) {
        try {
            WebSocketServer.sendInfo(message);
        } catch (IOException e) {
            e.printStackTrace();
        }
        return "success";
    }
}

前端

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>websocket示例</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <h3>消息显示</h3>
            <ul>
                <li v-for="(message, index) in messages" :key="index">
                    {{message}}
                </li>
            </ul>
            <hr>
            <h3>发送消息 </h3>
            <input type="text" v-model="sendMsg" />
            <button type="button" @click="send">发送</button>
        </div>
        <script type="text/javascript">
            var socket;
            var app = new Vue({
                el: '#app',
                data: {
                    messages: [],
                    sendMsg: ''
                },
                created: function() {
                    var _this = this;
                    //创建WebSocket对象，指定要连接的服务器地址和端口，建立连接
                    socket = new WebSocket("ws://10.40.209.53:8080/websocket");
                    //打开连接
                    socket.onopen = function() {
                        console.log("Socket已打开");

                    };
                    //获得服务端推送的消息
                    socket.onmessage = function(msg) {
                        console.log(msg.data);
                        _this.messages.push(msg.data);
                        console.log(_this.messages);
                    };
                    //关闭连接
                    socket.onclose = function() {
                        console.log("Socket已关闭");
                    };
                    //发送错误
                    socket.onerror = function() {
                        alert("Socket发生了错误");
                    }
                },
                watch: {
                    // 如果 `messages` 发生改变，这个函数就会运行
                    messages: function(newMsg, oldMsg) {
                        this.messages = newMsg;
                    },
                },
                methods: {
                    send: function() {
                        socket.send(this.sendMsg);
                    }
                }
            })
        </script>
    </body>
</html>