一、裝逼前先熱熱身
無論是比較傳統的 web項目 還是近幾年流行的前后端分離，后端只獨立提供數據交互接口服務的項目，都避免不了數據之間交互格式的選擇。
- 從很早之前的 xml 格式
- 到現在最火熱的json格式
我們可以發現數據格式都是越來越 “短小精悍” 。當然我們可能在某些特定的業務場合，比如對延時要求特別高的場景
- H5多人對戰類型游戲
- 實時的數據信息交互場景 語音聊天、以及難度更高的視頻聊天等
或者對傳輸數據大小有一定限制的業務場所；那么這時候我們就可以使用websocket 進行信息數據的交互；不過使用傳統的websocket +json字符串的方式來進行數據交互的話，無論是網絡帶寬的占用以及響應的時間上來說都比不上使用byte字節數組交互數據的方式；當然，對于很早之前的web前端，并不能很好的處理byte字節數組，不過隨著H5的到來我們在JavaScript上也可以很好的對二進制數據進行操作
二、具體實現步驟
- spring boot 依賴加入
- WebSocket config配置
- WebSocket接口類簡單實現
- 前端JavaScript具體實現
- 1、spring boot 依賴加入
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
- 2、 WebSocket config配置
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;
@Configuration
public class WebConfig {
@Bean
public ServerEndpointExporter serverEndpointExporter() {
return new ServerEndpointExporter();
}
}
- 3. WebSocket接口類簡單實現
package com.example.demo;
import org.springframework.stereotype.Component;
import java.nio.ByteBuffer;
import javax.websocket.*;
import javax.websocket.server.ServerEndpoint;
/**
* @ServerEndpoint
* 注解是一個類層次的注解，它的功能主要是將目前的類定義成一個websocket服務器端,
* 注解的值將被用于監聽用戶連接的終端訪問URL地址,客戶端可以通過這個URL來連接到WebSocket服務器端
*/
@ServerEndpoint(value="/websocket")
@Component
public class WebSocketTest {
@OnOpen
public void onOpen(Session session){ System.out.println("加入連接"); }
@OnClose
public void onClose(){ System.out.println("關閉連接"); }
@OnError
public void onError(Session session, Throwable error){
System.out.println("發生錯誤");
error.printStackTrace();
}
/**
* 收到客戶端消息后調用的方法
* @param messages 客戶端發送過來的消息
* @param session 可選的參數
*/
@OnMessage
public void onMessage(byte[] messages, Session session) {
try {
System.out.println("接收到消息:"+new String(messages,"utf-8"));
//返回信息
String resultStr="{name:\"張三\",age:18,addr:\"上海浦東\"}";
//發送字符串信息的 byte數組
ByteBuffer bf=ByteBuffer.wrap(resultStr.getBytes("utf-8"));
session.getBasicRemote().sendBinary(bf);
//發送字符串
//session.getBasicRemote().sendText("測試");
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
}
- 4. 前端JavaScript具體實現
<html>
<head>
</head>
<body>
<input id="text" type="text"/>
<button onclick="send()">發送消息</button>
<div id="message"></div>
</body>
<script type="text/javascript">
var websocket = null;
//判斷當前瀏覽器是否支持WebSocket
if ('WebSocket' in window) {
websocket = new WebSocket("ws://localhost:8080/websocket");
//websocket默認是傳輸字符串的，需要改為arraybuffer二進制傳輸類型
websocket.binaryType = "arraybuffer";
}else {
alert('當前瀏覽器 Not support websocket')
}
//連接發生錯誤的回調方法
websocket.onerror = function () {
setMessageInnerHTML("WebSocket連接發生錯誤");
};
//連接成功建立的回調方法
websocket.onopen = function () {
setMessageInnerHTML("WebSocket連接成功");
}
//接收到消息的回調方法
websocket.onmessage = function (event) {
//將接收到的二進制數據轉為字符串
var unit8Arr = new Uint8Array(event.data) ;
setMessageInnerHTML(byteToString(unit8Arr));
}
//連接關閉的回調方法
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;
//將字符串轉換為byte數組
var bytesArr= stringToByte(message);
var bytes =new Uint8Array(bytesArr.length) ;
for (var i = 0; i < bytes.length; i++) {
bytes[i]=bytesArr[i];
}
console.log(bytes)
websocket.send(bytes);
}
//將字符串轉為 Array byte數組
function stringToByte(str) {
var bytes = new Array();
var len, c;
len = str.length;
for(var i = 0; i < len; i++) {
c = str.charCodeAt(i);
if(c >= 0x010000 && c <= 0x10FFFF) {
bytes.push(((c >> 18) & 0x07) | 0xF0);
bytes.push(((c >> 12) & 0x3F) | 0x80);
bytes.push(((c >> 6) & 0x3F) | 0x80);
bytes.push((c & 0x3F) | 0x80);
} else if(c >= 0x000800 && c <= 0x00FFFF) {
bytes.push(((c >> 12) & 0x0F) | 0xE0);
bytes.push(((c >> 6) & 0x3F) | 0x80);
bytes.push((c & 0x3F) | 0x80);
} else if(c >= 0x000080 && c <= 0x0007FF) {
bytes.push(((c >> 6) & 0x1F) | 0xC0);
bytes.push((c & 0x3F) | 0x80);
} else {
bytes.push(c & 0xFF);
}
}
return bytes;
}
//byte數組轉字符串
function byteToString(arr) {
if(typeof arr === 'string') {
return arr;
}
var str = '',
_arr = arr;
for(var i = 0; i < _arr.length; i++) {
var one = _arr[i].toString(2),
v = one.match(/^1+?(?=0)/);
if(v && one.length == 8) {
var bytesLength = v[0].length;
var store = _arr[i].toString(2).slice(7 - bytesLength);
for(var st = 1; st < bytesLength; st++) {
store += _arr[st + i].toString(2).slice(2);
}
str += String.fromCharCode(parseInt(store, 2));
i += bytesLength - 1;
} else {
str += String.fromCharCode(_arr[i]);
}
}
return str;
}
</script>
</html>
三、效果展示
-
連接狀態
image.png
image.png
image.png
不過目前這只是一個特別簡單的demo，對于websocket的使用并不在本文中進行詳細的講解， 只是將這樣一種思路進行簡單的實現；
