WebSocket_实例

桃扇骨 2022-05-25 12:19 187阅读 0赞

握手协议的客户端数据已经由浏览器代劳了，服务器端需要我们自己来实现，目前市场上开源的实现也比较多如：

Kaazing WebSocket Gateway(一个 Java 实现的 WebSocket Server)；

mod\_pywebsocket(一个 Python 实现的 WebSocket Server)；

Netty(一个 Java 实现的网络框架其中包括了对 WebSocket 的支持)；

node.js(一个 Server 端的 JavaScript 框架提供了对 WebSocket 的支持)；

WebSocket4Net(一个.net的服务器端实现)；

实现一个服务器：

创建一个springMVC项目：websocket

导入jar包：

创建两个包：com.gary.server/com.glodon.controller，并添加springMVC配置，确保启动时扫包：

<context:component-scan base-package=*"com.glodon.controller"*></context:component-scan>

<context:component-scan base-package=*"com.gary.server"*></context:component-scan>

1. 后台

在com.gary.server创建一个类：WebSocketTest

给类添加一个注解@ServerEndpoint，使其成为WebSocket服务器的端点。

**package** com.gary.server;

**import** java.io.IOException;

**import** java.util.concurrent.CopyOnWriteArraySet;

**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** 可以将一个普通Java对象（POJO）作为WebSocket服务器的端点 。

\* 注解的值将被用于监听用户连接的终端访问URL地址,客户端可以通过这个URL来连接到WebSocket服务器端

\*/

@ServerEndpoint(value="/webchart")

**public** **class** WebSocketTest \{

//静态变量，用来记录当前在线连接数。应该把它设计成线程安全的。

**private** **static** **int** *onlineCount* = 0;

//concurrent包的线程安全Set，用来存放每个客户端对应的MyWebSocket对象。若要实现服务端与单一客户端通信的话，可以使用Map来存放，其中Key可以为用户标识

**private** **static** CopyOnWriteArraySet<WebSocketTest> *webSocketSet* = **new** CopyOnWriteArraySet<WebSocketTest>();

//与某个客户端的连接会话，需要通过它来给客户端发送数据

**private** Session session;

**public** WebSocketTest() \{

System.***out***.println("-------------WebSocketTest--------------------");

/\*\*

\* 连接建立成功调用的方法

\* **@param** session  可选的参数。session为与某个客户端的连接会话，需要通过它来给客户端发送数据

\*/

@OnOpen

**public** **void** onOpen(Session session)\{

**this**.session = session;

*webSocketSet*.add(**this**);     //加入set中

*addOnlineCount*();           //在线数加1

onMessage("ID"\+session.getId()+"上线！", **null**);

System.***out***.println("有新连接加入！ID"\+session.getId()+"，当前在线人数为：" + *getOnlineCount*());

/\*\*

\* 连接关闭调用的方法

\*/

@OnClose

**public** **void** onClose()\{

*webSocketSet*.remove(**this**);  //从set中删除

*subOnlineCount*();           //在线数减1

System.***out***.println("ID"\+session.getId()+"主动关闭连接，当前在线人数为：" + *getOnlineCount*());

onMessage("ID"\+session.getId()+"下线！", **null**);

/\*\*

\* 收到客户端消息后调用的方法

\* **@param** message 客户端发送过来的消息

\* **@param** session 可选的参数

\*/

@OnMessage

**public** **void** onMessage(String message, Session session) \{

**if** (session != **null**)\{

String messageSourceId = session.getId();

System.***out***.println("收到来自客户端ID"\+messageSourceId\+"的消息:" + message);

message = "ID" + messageSourceId + "说：" + message;

//群发消息

**for**(WebSocketTest item: *webSocketSet*)\{

**try** \{

item.sendMessage(message);

\} **catch** (IOException e) \{

e.printStackTrace();

**continue**;

/\*\*

\* 发生错误时调用

\* **@param** session

\* **@param** error

\*/

@OnError

**public** **void** onError(Session session, Throwable error)\{

System.***out***.println("ID"\+session.getId()+"发生错误");

error.printStackTrace();

**public** **void** sendMessage(String message) **throws** IOException\{

System.***out***.println("服务器向ID"\+session.getId()+"发送消息:"\+message);

**this**.session.getBasicRemote().sendText(message);

**public** **static** **synchronized** **int** getOnlineCount() \{

**return** *onlineCount*;

**public** **static** **synchronized** **void** addOnlineCount() \{

WebSocketTest.*onlineCount*\++;

**public** **static** **synchronized** **void** subOnlineCount() \{

WebSocketTest.*onlineCount*\--;

2. 前端

先添加一个controller：

@Controller

**public** **class** clientController \{

@RequestMapping("/client")

**public** String client()\{

System.***out***.println("client");

**return** "client";

再写一个client.jsp

<%@ page language=*"java"* pageEncoding=*"UTF-8"*%>

<!DOCTYPE html>

<html>

<head>

<title>Java后端WebSocket的Tomcat实现</title>

</head>

<body>

Welcome

<br />

<input id=*"text"* type=*"text"* />

<button onclick="send()">发送消息</button>

<hr />

<button onclick="closeWebSocket()">关闭WebSocket连接</button>

<hr />

<div id=*"message"*></div>

</body>

**var** websocket = **null**;

**var** url = 'ws://127.0.0.1:8080/websocket/webchart';

//判断当前浏览器是否支持WebSocket

**if** ('WebSocket' **in** window) \{

websocket = **new** WebSocket(url);

\} **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连接，防止连接还没断开就关闭窗口，server端会抛异常。

window.onbeforeunload = **function**() \{

closeWebSocket();

//将消息显示在网页上

**function** setMessageInnerHTML(innerHTML) \{

document.getElementById('message').innerHTML += innerHTML + '<br/>';

//关闭WebSocket连接

**function** closeWebSocket() \{

websocket.close();

//发送消息

**function** send() \{

**var** message = document.getElementById('text').value;

websocket.send(message);

</script>

</html>

readyState表示连接有四种状态：

CONNECTING (0)：表示还没建立连接；

OPEN (1)： 已经建立连接，可以进行通讯；

CLOSING (2)：通过关闭握手，正在关闭连接；

CLOSED (3)：连接已经关闭或无法打开；

url是代表 WebSocket 服务器的网络地址，协议通常是”ws”或“wss(加密通信)”,send 方法就是发送数据到服务器端；如：

**var** url = 'ws://127.0.0.1:8080/websocket/webchart';

其中websocket是项目名，webchart'是@ServerEndpoint注解对应的值。

close 方法就是关闭连接；

onopen连接建立，即握手成功触发的事件；

onmessage收到服务器消息时触发的事件；

onerror异常触发的事件；

onclose关闭连接触发的事件；

3. 测试

使用两个浏览器分别访问：[http://localhost:8080/websocket/client][http_localhost_8080_websocket_client]

然后就可以直接通讯了：

![2018051420294627][]

![20180514202959375][]

同时，后台也记录了所有信息：

![20180514203016941][]

[http_localhost_8080_websocket_client]: http://localhost:8080/websocket/client
[2018051420294627]: /images/20220525/61e50d9c99ae4a25895a35cf584412fb.png
[20180514202959375]: /images/20220525/1d007839ce7c4c80840730702bebfbca.png
[20180514203016941]: /images/20220525/4558bd436c97498594a93453bb1e7e07.png