WebSocket原理和实现

发表于 | 分类于

简单介绍

WebSocket 协议在2008年诞生，2011年成为国际标准。现在所有浏览器都已经支持了。WebSocket 的最大特点就是，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，双工模式。

WebSocket是HTML5出（协议），也就是说HTTP协议没有变化，或者说没关系，但HTTP是不支持持久连接的（长连接，循环连接的不算）HTTP 有 1.1 和 1.0 之说，也就是所谓的 keep-alive ，把多个 HTTP 请求合并为一个，但是 Websocket 其实是一个新协议，跟 HTTP 协议基本没有关系，只是为了兼容现有浏览器，所以在握手阶段使用了 HTTP 。

20200328182707

Websocket是一个持久化的协议，相对于HTTP这种非持久的协议来说。

WebSocket 建立在 TCP 协议之上，服务器端的实现比较容易。与 HTTP 协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。

数据格式比较轻量，性能开销小，通信高效。可以发送文本，也可以发送二进制数据。没有同源限制，客户端可以与任意服务器通信。协议标识符是ws（如果加密，则为wss），服务器网址就是 URL。

原理

首先 WebSocket 是基于 HTTP 协议的，或者说借用了 HTTP 协议来完成一部分握手。

1
2
3
4
5
6
7
8
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

这段类似 HTTP 协议的握手请求中，多了这么几个东西。

1
2
Upgrade: websocket
Connection: Upgrade

这就是 WebSocket 的核心了，告诉 Apache 、 Nginx 等服务器，发起的请求要用 WebSocket 协议，找到对应处理而不是 HTTP。

1
2
3
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13

首先， Sec-WebSocket-Key 是一个 Base64 encode 的值，这个是浏览器随机生成的，告诉服务器来验证是否是WebSocket服务。

然后， Sec_WebSocket-Protocol 是一个用户定义的字符串，用来区分同 URL 下，不同的服务所需要的协议。

最后， Sec-WebSocket-Version 是告诉服务器所使用的 WebSocket Draft （协议版本），在最初的时候，WebSocket 协议还在 Draft 阶段，各种不同的协议都有，Firefox 和 Chrome 用的不是一个版本之类的，当初 WebSocket 协议太多可是一个大难题。

然后服务器会返回下列东西，表示已经接受到请求， 成功建立 WebSocket：

1
2
3
4
5
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=
Sec-WebSocket-Protocol: chat

这里开始就是 HTTP 最后负责的部分。告诉了客户端，成功转换协议WebSocket协议。

1
2
Upgrade: websocket
Connection: Upgrade

告诉客户端即将升级的是 WebSocket 协议。 Sec-WebSocket-Accept 这个则是经过服务器确认，并且加密过后的 Sec-WebSocket-Key ， Sec-WebSocket-Protocol 则是表示最终使用的协议。

实现

在没有WebSocket之前，我们是怎么处理长连接的情况，是使用ajax轮询 和 long poll。大多数 Web 应用程序将通过频繁的异步 JavaScript 和 XML（AJAX）请求实现长轮询。轮询的效率低，非常浪费资源（因为必须不停连接，或者 HTTP 连接始终打开）。

  • ajax轮询
    ajax轮询的原理非常简单，让浏览器隔个几秒就发送一次请求，询问服务器是否有新信息。
  • poll
    long poll 其实原理跟 ajax轮询 差不多，都是采用轮询的方式，不过采取的是阻塞模型，客户端发起请求后，如果没消息，就一直不返回 Response 给客户端。直到有消息才返回，返回完之后，客户端再次建立连接，周而复始。

这两种方式，都是在不断地建立HTTP连接，然后等待服务端处理，可以体现HTTP协议的另外一个特点，被动性：服务端不能主动联系客户端，只能有客户端发起。

ajax轮询 需要服务器有很快的处理速度和资源。long poll 需要有很高的并发。

  • WebSocket 如何工作？

Web 浏览器和服务器都必须实现 WebSockets 协议来建立和维护连接。由于 WebSockets 连接长期存在，与典型的 HTTP 连接不同，对服务器有重要的影响。

基于多线程或多进程的服务器无法适用于 WebSockets，因为它旨在打开连接，尽可能快地处理请求，然后关闭连接。任何实际的 WebSockets 服务器端实现都需要一个异步服务器。

WebSocket 客户端

在客户端，没有必要为 WebSockets 使用 JavaScript 库。实现 WebSockets 的 Web 浏览器将通过 WebSockets 对象实现客户端功能（Html5已经实现了WebSocket）。

API

以下 API 用于创建 WebSocket 对象。

1
2
//第一个参数 url, 指定连接的 URL。第二个参数 protocol 是可选的，指定了可接受的子协议。
var Socket = new WebSocket(url, [protocol] );

WebSocket 属性
属性 | 描述
——- | ——-
Socket.readyState | 只读属性 readyState 表示连接状态，CONNECTING：值为0，表示正在连接。OPEN：值为1，表示连接成功，可以通信了。CLOSING：值为2，表示连接正在关闭。CLOSED：值为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() | 关闭连接

WebSocket 服务端

WebSocket 在服务端的实现非常丰富。Node.js、Java、C++、Python 等多种语言都有自己的解决方案。
语言框架 | 实现
——- | ——-
Node.js | 3种实现：µWebSockets、Socket.IO、WebSocket-Node
Java | javaweb通常依托servlet 容器：Tomcat7、Jetty7 及以上版本均开始支持 WebSocket。Spring 框架对 WebSocket 也提供了支持。

它们都遵循RFC6455 的通信标准，并且 Java API 统一遵循 JSR 356 - JavaTM API for WebSocket 规范。所以，在实际编码中，API 差异不大。

示例

新建一个maven项目引入包：

1
2
3
4
5
6
7
8
9
<!-- javaweb实现的websocket -->
<dependencies>
    <dependency>
        <groupId>javax</groupId>
        <artifactId>javaee-api</artifactId>
        <version>7.0</version>
        <scope>provided</scope>
    </dependency>
</dependencies>

页面文件js：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<script type="text/javascript">
    var websocket = null;
    //判断当前浏览器是否支持WebSocket
    if ('WebSocket' in window) {
        websocket = new WebSocket("ws://localhost:8080/demo/demo1");
    } else {
        alert('Not support websocket')
    }

    websocket.onerror = function () {
        setMessageInnerHTML("WebSocket连接发生错误");
    };

    websocket.onopen = function () {
        setMessageInnerHTML("WebSocket连接成功");
    }

    //接收到消息的回调方法
    websocket.onmessage = function (event) {
        setMessageInnerHTML(event.data);
    }

    websocket.onclose = function () {
        setMessageInnerHTML("WebSocket连接关闭");
    }

    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接。
    window.onbeforeunload = function () {
        closeWebSocket();
    }

    function setMessageInnerHTML(innerHTML) {
        document.getElementById('message').innerHTML += innerHTML + '<br/>';
    }

    function closeWebSocket() {
        websocket.close();
    }

    function send() {
        var message = document.getElementById('text').value;
        websocket.send(message);
    }
</script>

Java web服务端：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
/**
 * @ServerEndpoint 注解是将目前的类定义成一个websocket服务器端
 */
@ServerEndpoint("/demo1")
public class WebSocketServiceDemo {
    //与某个客户端的连接会话，需要通过它来给客户端发送数据
    private Session session;

    /**
     * 连接建立成功调用的方法
     *
     * @param session 可选的参数。
     *                session为与某个客户端的连接会话，需要通过它来给客户端发送数据
     */
    @OnOpen
    public void onOpen(Session session) {
        this.session = session;
        System.out.println("有新连接加入！");
    }

    /**
     * 连接关闭调用的方法
     */
    @OnClose
    public void onClose() {
        System.out.println("有一连接关闭！");
    }

    /**
     * 收到客户端消息后调用的方法
     *
     * @param message 客户端发送过来的消息
     * @param session 可选的参数
     */
    @OnMessage
    public void onMessage(String message, Session session) {
        System.out.println("来自客户端的消息:" + message);
        //回复消息
        try {
            this.session.getBasicRemote().sendText(message);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

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

}

idea中部测试：

创建webapp目录和web.xml
20200328185021
创建artifacts
20200328185303
配置服务器：

选择Deployment

运行：

1
2
3
4
有新连接加入！
来自客户端的消息:你好
有新连接加入！
来自客户端的消息:a你好

把它改成一个聊天室的模式
用户可以看到加入的其他用户发的消息，后台代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
@ServerEndpoint(value = "/demo1", encoders = {ServerEncoder.class})
public class WebSocketServiceDemo {
    private static final AtomicInteger connectionIds = new AtomicInteger(0);
    // 存放用户的websocket
    private static final Set<WebSocketServiceDemo> connections = new CopyOnWriteArraySet<>();

    private final String nickname;
    private Session session;

    public WebSocketServiceDemo() {
        nickname = "用户" + connectionIds.getAndIncrement();
    }

    /**
     * 连接建立成功调用的方法
     */
    @OnOpen
    public void onOpen(Session session) {
        this.session = session;
        connections.add(this);
        String message = String.format(" %s %s", nickname, "加入聊天室");
        // 上线通知
        broadcast(0,message);
        try {
            // 系统问候语
            sendHello(this);
            // 返回在线用户
            onlineList();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    /**
     * 连接关闭调用的方法
     */
    @OnClose
    public void onClose() {
        connections.remove(this);
        connectionIds.decrementAndGet();
        try {
            onlineList();
        } catch (Exception e) {
            e.printStackTrace();
        }
        String message = String.format(" %s %s", nickname, "退出聊天室");
        broadcast(0,message);
    }

    /**
     * 收到客户端消息后调用的方法
     *
     * @param message 客户端发送过来的消息
     * @param session 可选的参数
     */
    @OnMessage
    public void onMessage(String message, Session session) {
        // TODO: 过滤输入的内容
        String m = String.format(" %s %s", nickname, message);
        if (m.contains("To")) {
            // 点对点发送 消息中包含 To
            broadcastOneToOne(3,m);
        } else {
            // 群发
            broadcast(1,m);
        }
    }

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

    /**
     * 消息广播 通过connections，对所有其他用户推送信息的方法
     *
     * @param msg
     */
    private void broadcast(int type, String msg) {
        Message message = new Message(type, msg);
        for (WebSocketServiceDemo client : connections) {
            try {
                synchronized (client) {
                    client.session.getBasicRemote().sendObject(message);
                }
            } catch (Exception e) {
                System.out.println("错误:向客户端发送消息失败");
                connections.remove(client);
                try {
                    client.session.close();
                } catch (Exception e1) {
                    e1.printStackTrace();
                }
                String msg1 = String.format(" %s %s", client.nickname, "退出聊天室");
                broadcast(0,msg1);
            }
        }
    }

    /**
     * 点对点发送消息
     */
    private void broadcastOneToOne(int type, String msg) {
        String[] arr = msg.split("To");
        String toNickName=arr[1];
        Message message = new Message(type, arr[0]);
        boolean isSend = false;
        for (WebSocketServiceDemo client : connections) {
            try {
                if (toNickName.equals(client.nickname)) {
                    synchronized (client) {
                        try {
                            client.session.getBasicRemote().sendObject(message);
                            this.session.getBasicRemote().sendObject(message);
                            isSend = true;
                        } catch (EncodeException e) {
                            e.printStackTrace();
                        }
                    }
                }
            } catch (IOException e) {
                System.out.println("错误:向用户发送消息失败");
                connections.remove(client);
                try {
                    client.session.close();
                } catch (IOException e1) {
                    e1.printStackTrace();
                }
                broadcast(0, String.format(" %s %s", client.nickname, "退出聊天室"));
            }
        }
        if(!isSend){
            try {
                this.session.getBasicRemote().sendObject(new Message(0, "该用户不存在"));
            } catch (IOException e) {
                e.printStackTrace();
            } catch (EncodeException e) {
                e.printStackTrace();
            }
        }
    }

    // 系统问候语
    private void sendHello(WebSocketServiceDemo client) throws Exception {
        String m = String.format(" %s 你好！！", client.nickname);
        Message message = new Message(0, m);
        client.session.getBasicRemote().sendObject(message);
    }

    // 在线用户,所有的用户一起推送。
    private void onlineList() throws Exception {
        String online = "";
        for (WebSocketServiceDemo client : connections) {
            if (online.equals("")) {
                online = client.nickname;
            } else {
                online += "</br>" + client.nickname;
            }
        }
        Message message = new Message(2, online);
        for (WebSocketServiceDemo client : connections) {
            client.session.getBasicRemote().sendObject(message);
        }
    }

    public static class Message implements Serializable {
        private int type;//消息类型
        private String msg;//消息内容

        public Message(int type, String msg) {
            this.type = type;
            this.msg = msg;
        }

        public int getType() {
            return type;
        }

        public void setType(int type) {
            this.type = type;
        }

        public String getMsg() {
            return msg;
        }

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

由于在运行时报错：javax.websocket.EncodeException: No encoder specified for object of class
因为，使用client.session.getBasicRemote().sendObject(obj);发送对象数据。解决办法：

新增一个类，并且在主类注解中加入代码：encoders = {ServerEncoder.class}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
public class ServerEncoder implements Encoder.Text<WebSocketServiceDemo.Message> {

    @Override
    public void destroy() {
    }

    @Override
    public void init(EndpointConfig arg0) {
    }

    @Override
    public String encode(WebSocketServiceDemo.Message messagepojo) throws EncodeException {
        return JSONObject.toJSONString(messagepojo);
    }
}

页面：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<html>
<head>
    <title>WebSocket聊天室的实现</title>
    <script type="text/javascript">
        var websocket = null;
        //判断当前浏览器是否支持WebSocket
        if ('WebSocket' in window) {
            websocket = new WebSocket("ws://localhost:8080/demo/demo1");
        } else {
            alert('Not support websocket')
        }

        websocket.onerror = function () {
            document.getElementById('tps').innerHTML = '连接错误！';
        };

        websocket.onopen = function () {
            document.getElementById('tps').innerHTML = '连接成功！';
        }

        //接收到消息的回调方法
        websocket.onmessage = function (event) {
            console.log(event.data);
            let obj = JSON.parse(event.data);
            if(obj.type == 0){//系统消息
                console.log("syso");
                setMessageInnerHTML("<span style='color: crimson;font-size: 12px'>系统："+obj.msg+"</span>");
            }else if(obj.type == 1){
                setMessageInnerHTML("<span style='color: black;font-size: 14px'>>："+obj.msg+"</span>");
            }else if(obj.type == 2){//成员列表
                document.getElementById('users').innerHTML = obj.msg + '<br/>';
            }else if(obj.type == 3){//私发
                setMessageInnerHTML("<span style='color: black;font-size: 14px'>>："+obj.msg+"</span>");
            }
        }

        websocket.onclose = function () {
            document.getElementById('tps').innerHTML = '连接关闭！';
        }

        //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接。
        window.onbeforeunload = function () {
            closeWebSocket();
        }

        function setMessageInnerHTML(innerHTML) {
            document.getElementById('message').innerHTML += innerHTML + '<br/>';
        }

        function closeWebSocket() {
            websocket.close();
        }

        function send() {
            var message = document.getElementById('text').value;
            websocket.send(message);
        }
    </script>
</head>
<body>
<input id="text" type="text"/>
<button onclick="send()">发送消息</button> <button onclick="closeWebSocket()">关闭连接</button>
<span id="tps" style="color: crimson"></span>
<hr/>
<div id="message" style="width: 80%; float:left; display: block; border: 1px solid #1353C2;"></div>
<div style="width: 18%; float: right;display: block; border: 1px solid #1353C2;">
    <div >成员：</div>
    <div id="users" style="font-size: 13px"></div>
</div>
</body>

测试成功：

多用户多聊天室

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
@ServerEndpoint(value = "/demo/{roomId}/{userId}", encoders = {ServerEncoder.class})
public class WebSocketServiceDemo1 {
    private static final Map<String, Set<WebSocketServiceDemo1>> rooms = new ConcurrentHashMap<>();
    private String roomId;
    private String userId;
    private Session session;

    public WebSocketServiceDemo1() {

    }

    /**
     * 连接建立成功调用的方法
     */
    @OnOpen
    public void onOpen(Session session, @PathParam("roomId") String roomId, @PathParam("userId") String userId) {
        this.session = session;
        this.userId = userId;
        this.roomId = roomId;
        if(rooms.get(roomId)==null){
            Set<WebSocketServiceDemo1> socketServices = new CopyOnWriteArraySet<>();
            socketServices.add(this);
            rooms.put(roomId,socketServices);
        }else {
            rooms.get(roomId).add(this);
        }
        String message = String.format(" %s %s", userId, "加入聊天室");
        // 上线通知
        broadcast(0,message);
        try {
            // 系统问候语
            sendHello(this);
            // 返回在线用户
            onlineList();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    /**
     * 连接关闭调用的方法
     */
    @OnClose
    public void onClose() {
        System.out.println(this.userId+"退出");
        rooms.get(roomId).remove(this);
        try {
            onlineList();
        } catch (Exception e) {
            e.printStackTrace();
        }
        String message = String.format(" %s %s", userId, "退出聊天室");
        broadcast(0,message);
    }

    /**
     * 收到客户端消息后调用的方法
     *
     * @param message 客户端发送过来的消息
     * @param session 可选的参数
     */
    @OnMessage
    public void onMessage(String message, Session session) {
        // TODO: 过滤输入的内容
        String m = String.format(" %s %s", userId, message);
        if (m.contains("To")) {
            // 点对点发送 消息中包含 To
            broadcastOneToOne(3,m);
        } else {
            // 群发
            broadcast(1,m);
        }
    }

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

    /**
     * 消息广播 通过connections，对所有其他用户推送信息的方法
     *
     * @param msg
     */
    private void broadcast(int type, String msg) {
        Message message = new Message(type, msg);
        Set<WebSocketServiceDemo1> connections = rooms.get(roomId);
        for (WebSocketServiceDemo1 client : connections) {
            try {
                synchronized (client) {
                    client.session.getBasicRemote().sendObject(message);
                }
            } catch (Exception e) {
                System.out.println("错误:向客户端发送消息失败");
                connections.remove(client);
                try {
                    client.session.close();
                } catch (Exception e1) {
                    e1.printStackTrace();
                }
                String msg1 = String.format(" %s %s", client.userId, "退出聊天室");
                broadcast(0,msg1);
            }
        }
    }

    /**
     * 点对点发送消息
     */
    private void broadcastOneToOne(int type, String msg) {
        String[] arr = msg.split("To");
        String toNickName=arr[1];
        Message message = new Message(type, arr[0]);
        boolean isSend = false;
        Set<WebSocketServiceDemo1> connections = rooms.get(roomId);
        for (WebSocketServiceDemo1 client : connections) {
            try {
                if (toNickName.equals(client.userId)) {
                    synchronized (client) {
                        try {
                            client.session.getBasicRemote().sendObject(message);
                            this.session.getBasicRemote().sendObject(message);
                            isSend = true;
                        } catch (EncodeException e) {
                            e.printStackTrace();
                        }
                    }
                }
            } catch (IOException e) {
                System.out.println("错误:向用户发送消息失败");
                connections.remove(client);
                try {
                    client.session.close();
                } catch (IOException e1) {
                    e1.printStackTrace();
                }
                broadcast(0, String.format(" %s %s", client.userId, "退出聊天室"));
            }
        }
        if(!isSend){
            try {
                this.session.getBasicRemote().sendObject(new Message(0, "该用户不存在"));
            } catch (IOException e) {
                e.printStackTrace();
            } catch (EncodeException e) {
                e.printStackTrace();
            }
        }
    }

    // 系统问候语
    private void sendHello(WebSocketServiceDemo1 client) throws Exception {
        String m = String.format(" %s 你好！！", client.userId);
        Message message = new Message(0, m);
        client.session.getBasicRemote().sendObject(message);
    }

    // 在线用户,所有的用户一起推送。
    private void onlineList() throws Exception {
        String online = "";
        Set<WebSocketServiceDemo1> connections = rooms.get(roomId);
        for (WebSocketServiceDemo1 client : connections) {
            if (online.equals("")) {
                online = client.userId;
            } else {
                online += "</br>" + client.userId;
            }
        }
        Message message = new Message(2, online);
        for (WebSocketServiceDemo1 client : connections) {
            client.session.getBasicRemote().sendObject(message);
        }
    }

    public static class Message implements Serializable {
        private int type;//消息类型
        private String msg;//消息内容

        public Message(int type, String msg) {
            this.type = type;
            this.msg = msg;
        }

        public int getType() {
            return type;
        }

        public void setType(int type) {
            this.type = type;
        }

        public String getMsg() {
            return msg;
        }

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

index:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<%@ page language="java" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <title>WebSocket聊天室的实现</title>
    <script type="text/javascript">
        function soc() {
            let roomId = document.getElementById("roomId").value;
            let userId = document.getElementById("userId").value;
            if(roomId=='' || userId==''){
                document.getElementById('tps').innerHTML = '房间号和用户id不能为空！';
                return;
            }
            socket(roomId,userId);
        }
        var websocket = null;
        function socket(roomId,userId) {
            //判断当前浏览器是否支持WebSocket
            if ('WebSocket' in window) {
                websocket = new WebSocket("ws://localhost:8080/demo/demo/"+roomId+"/"+userId);
            } else {
                alert('Not support websocket')
            }

            websocket.onerror = function () {
                document.getElementById('tps').innerHTML = '连接错误！';
            };

            websocket.onopen = function () {
                document.getElementById('tps').innerHTML = '连接成功！';
            }

            //接收到消息的回调方法
            websocket.onmessage = function (event) {
                console.log(event.data);
                let obj = JSON.parse(event.data);
                if(obj.type == 0){//系统消息
                    console.log("syso");
                    setMessageInnerHTML("<span style='color: crimson;font-size: 12px'>系统："+obj.msg+"</span>");
                }else if(obj.type == 1){
                    setMessageInnerHTML("<span style='color: black;font-size: 14px'>>："+obj.msg+"</span>");
                }else if(obj.type == 2){//成员列表
                    document.getElementById('users').innerHTML = obj.msg + '<br/>';
                }else if(obj.type == 3){//私发
                    setMessageInnerHTML("<span style='color: black;font-size: 14px'>>："+obj.msg+"</span>");
                }
            }

            websocket.onclose = function () {
                document.getElementById('tps').innerHTML = '连接关闭！';
            }

        }
        //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接。
        window.onbeforeunload = function () {
            closeWebSocket();
        }

        function setMessageInnerHTML(innerHTML) {
            document.getElementById('message').innerHTML += innerHTML + '<br/>';
        }

        function closeWebSocket() {
            websocket.close();
        }

        function send() {
            var message = document.getElementById('text').value;
            websocket.send(message);
        }


    </script>
</head>
<body>
聊天室ID:<input id="roomId" type="text"/>
用户ID:<input id="userId" type="text"/>
<button onclick="soc()">连接聊天室</button>
<hr/>
输入：<input id="text" type="text"/> <button onclick="send()">发送消息</button> <button onclick="closeWebSocket()">关闭连接</button>
<span id="tps" style="color: crimson"></span>
<hr/>
<div id="message" style="width: 80%; float:left; display: block; border: 1px solid #1353C2;"></div>
<div style="width: 18%; float: right;display: block; border: 1px solid #1353C2;">
    <div >成员：</div>
    <div id="users" style="font-size: 13px"></div>
</div>
</body>
</html>

测试完成。

简单的websocket就完成。后面介绍websocket spring或springboot实现。

分享到： 收藏夹 复制网址 邮件 微信 QQ空间 腾讯微博 豆瓣 一键分享 更多