WebSocket笔记
构造函数
常量
| Constant | Value |
|---|---|
WebSocket.CONNECTING | 0 |
WebSocket.OPEN | 1 |
WebSocket.CLOSING | 2 |
WebSocket.CLOSED | 3 |
属性
-
WebSocket.binaryType使用二进制的数据类型连接。
-
WebSocket.bufferedAmount只读未发送至服务器的字节数。
-
WebSocket.extensions只读服务器选择的扩展。
-
WebSocket.onclose用于指定连接关闭后的回调函数。
-
WebSocket.onerror用于指定连接失败后的回调函数。
-
WebSocket.onmessage用于指定当从服务器接受到信息时的回调函数。
-
WebSocket.onopen用于指定连接成功后的回调函数。
-
WebSocket.protocol只读服务器选择的下属协议。
-
WebSocket.readyState只读当前的链接状态。
-
WebSocket.url只读WebSocket 的绝对路径。
方法
-
WebSocket.close([code[, reason\]])关闭当前链接。
-
WebSocket.send(data)对要传输的数据进行排队。
事件
使用 addEventListener() 或将一个事件监听器赋值给本接口的 on*eventname* 属性，来监听下面的事件。
-
close当一个
WebSocket连接被关闭时触发。 也可以通过onclose属性来设置。 -
error当一个
WebSocket连接因错误而关闭时触发，例如无法发送数据时。 也可以通过onerror属性来设置. -
message当通过
WebSocket收到数据时触发。 也可以通过onmessage属性来设置。 -
open当一个
WebSocket连接成功时触发。 也可以通过onopen属性来设置。
示例
// Create WebSocket connection.
const socket = new WebSocket('ws://localhost:8080');
// Connection opened
socket.addEventListener('open', function (event) {
socket.send('Hello Server!');
});
// Listen for messages
socket.addEventListener('message', function (event) {
console.log('Message from server ', event.data);
});
SpringBoot整合WebSocket
Pom.xml文件
<!-- websocket依赖 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
配置类
@Configuration
public class WebSocketConfig {
@Bean
public ServerEndpointExporter serverEndpointExporter(){
return new ServerEndpointExporter();
}
}
WebSocket服务器类
@ServerEndpoint(value = "/websocketTest/{userId}")
@Component
@Slf4j
public class TestWebSocket {
private static Map<String,Session> userMap = new HashMap<>();
@OnOpen//当一个 `WebSocket` 连接成功时触发
public void onOpen(Session session, @PathParam("userId") String userId){
userMap.put(session.getId(), session);
log.debug("新创建连接：{}", userId);
}
@OnClose//当一个 `WebSocket` 连接被关闭时触发
public void onClose(Session session){
//关闭时从内从中移除聊天信息
userMap.remove(session.getId());
log.debug("连接：{}断开",session.getId());
}
@OnMessage//当一个 `WebSocket` 连接被关闭时触发
public void onMessage(String message,Session session) throws IOException {
log.debug("收到用户{}的消息{}",session.getId(),message);
//广播形式发送消息
Iterator<Map.Entry<String, Session>> radioBroadcast = userMap.entrySet().iterator();
while(radioBroadcast.hasNext()){
Map.Entry<String, Session> next = radioBroadcast.next();
next.getValue().getBasicRemote().sendText(session.getId()+"发送消息为："+message);
}
}
@OnError//当一个 `WebSocket` 连接因错误而关闭时触发
public void onError(Session session,Throwable error){
log.debug("用户id为:{}连接发送错误",session.getId());
error.printStackTrace();
}
}
前端页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
websocket Demo---- user000 <br />
<input id="text" type="text" />
<button onclick="send()"> Send </button>
<button onclick="closeWebSocket()"> Close </button>
<div id="message"> </div>
<script type="text/javascript">
//判断当前浏览器是否支持WebSocket
if('WebSocket' in window){
console.log("link success");
websocket = new WebSocket("ws://localhost:8080/websocketTest/user001");
}else{
alert('Not support websocket')
}
//连接发生错误的回调方法
websocket.onerror = function(){
setMessageInnerHTML("error");
};
//连接成功建立的回调方法
websocket.onopen = function(event){
setMessageInnerHTML("open");
};
//接收到消息的回调方法
websocket.onmessage = function(event){
setMessageInnerHTML(event.data);
};
//连接关闭的回调方法
websocket.onclose = function(){
setMessageInnerHTML("close");
};
//将消息显示在网页上
function setMessageInnerHTML(innerHTML){
document.getElementById('message').innerHTML += innerHTML + '<br/>';
}
//发送消息
function send(){
var message = document.getElementById('text').value;
websocket.send(message);
}
//关闭连接
function closeWebSocket(){
websocket.close();
}
//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
window.onbeforeunload = function(){
websocket.close();
};
</script>
</body>
</html>
