websocket雖說兼容性差泵督，但是隨著移動(dòng)互聯(lián)網(wǎng)的發(fā)展，websocket的使用也越來越多搬泥。今天就來說一下桑寨，springboot如何集成websocket伏尼，其實(shí)很簡(jiǎn)單，這些spring都給我們做好了尉尾，只需簡(jiǎn)單配置一下就可以用來爆阶，廢話不多說，直接擼碼。
第一步: 先創(chuàng)建一個(gè)springboot項(xiàng)目
第二步:在pom中引入websocket依賴
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
第三步: 配置springboot支持websocket,這里我就直接將配置放在啟動(dòng)類中了辨图，當(dāng)然也可以自己創(chuàng)建一個(gè)config注入班套。
@SpringBootApplication
public class RedisClusterDemoApplication implements ServletContextInitializer {
public static void main(String[] args) {
SpringApplication.run(RedisClusterDemoApplication.class, args);
}
//添加websocket支持
@Bean
public ServerEndpointExporter serverEndpointExporter(){
return new ServerEndpointExporter();
}
}
第四步：新建一個(gè)websocket處理類,這里我創(chuàng)建一個(gè)類為WebSocketServer
@Slf4j
//這里特別注意必須加‘/’否則注入會(huì)報(bào)錯(cuò)我被坑了??，
@ServerEndpoint("/websocket")
@Component
public class WebSocketServer {
@OnOpen
public void onOpen(Session session){
log.error("----onOpen-----");
}
@OnClose
public void onClose(){
log.error("----onClose-----");
}
@OnMessage
public void onMessage(String message,Session session){
log.error("----onMessage-----"+ message);
//這里的邏輯是客戶端發(fā)送來消息服務(wù)器轉(zhuǎn)發(fā)給所有在線客戶端
try {
for (Session c:session.getOpenSessions()
) {
c.getBasicRemote().sendText(message);
}
} catch (IOException e) {
e.printStackTrace();
}
}
@OnError
public void onError(Session session, Throwable error){
log.error("----onError-----"+error.getMessage());
}
}
到這步故河，簡(jiǎn)單websocket服務(wù)器就搭建好了吱韭，接下來用前端測(cè)試一下：
第五步：前端測(cè)試，新建一個(gè)html文件如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>websocket測(cè)試</title>
</head>
<body>
<input type="text" id="text"><button onclick="sendText()">發(fā)送</button>
<input type="file" id="f" onchange="chooseFile()">
<div id="main">
</div>
<script type="text/javascript">
var ws = new WebSocket("ws://localhost:9011/websocket")
ws.onopen = function (ev) {
console.log("------連接服務(wù)器成功-----")
}
ws.onerror=function (ev) {
console.log("------連接服務(wù)器出錯(cuò)-----")
}
//接收消息
ws.onmessage=function (ev) {
//解析json
var json = JSON.parse(ev.data);
//1為文本消息
if(json.code==1){
document.querySelector("#main").innerHTML="<p>"+json.msg+"</p>"+document.querySelector("#main").innerHTML;
//2為圖片消息
}else if(json.code==2){
document.querySelector("#main").innerHTML='<img width="150px" src='+json.msg+'>'+document.querySelector("#main").innerHTML;
}
}
//發(fā)送文本消息
function sendText() {
var msg = document.querySelector("#text").value
if(msg){
ws.send(JSON.stringify({code:1,msg:msg}));
document.querySelector("#text").value=""
}
}
//發(fā)送圖片消息
function chooseFile() {
var files = document.querySelector("#f").files
if(files.length>0){
var fileReader = new FileReader();
fileReader.readAsDataURL(files[0])
fileReader.onload=function (e) {
var s = JSON.stringify({code:2,msg:e.target.result});
ws.send(s)
}
}
}
</script>
</body>
</html>
因?yàn)榇a簡(jiǎn)單鱼的，所以把源碼全部貼了理盆。
別以為到這里就完了，文本消息隨便發(fā)送都沒有問題凑阶，但是圖片發(fā)送就出問題了猿规，關(guān)鍵是不報(bào)錯(cuò)，我到網(wǎng)上看到有人問websocket發(fā)送內(nèi)容太長(zhǎng)了報(bào)錯(cuò)宙橱。我猜想應(yīng)該就是這個(gè)問題姨俩。因?yàn)槲覀儓D片采用base64發(fā)送，因此內(nèi)容肯定會(huì)很長(zhǎng)师郑，有的小的圖片可以發(fā)（比如1-2k這種）环葵，但大的就不行。于是就順著websocket發(fā)送內(nèi)容太長(zhǎng)了如何解決的問題呕乎，我在網(wǎng)上找到一個(gè)解決辦法：
https://blog.csdn.net/luohualiushui1/article/details/86596754 非常感謝博主的貢獻(xiàn)积担。
即加入配置 在原來的啟動(dòng)類中實(shí)現(xiàn)ServletContextInitializer接口并設(shè)置發(fā)送內(nèi)容大小限制。
@SpringBootApplication
public class RedisClusterDemoApplication implements ServletContextInitializer {
public static void main(String[] args) {
SpringApplication.run(RedisClusterDemoApplication.class, args);
}
//添加websocket支持
@Bean
public ServerEndpointExporter serverEndpointExporter(){
return new ServerEndpointExporter();
}
//設(shè)置websocket發(fā)送內(nèi)容長(zhǎng)度
@Override
public void onStartup(ServletContext servletContext) throws ServletException {
servletContext.setInitParameter("org.apache.tomcat.websocket.textBufferSize","1024000");
}
}
至此猬仁，就可以實(shí)現(xiàn)websocket的發(fā)送圖片帝璧，大小圖都可以了(當(dāng)然看配置，如果需要發(fā)MB級(jí)別自己修改參數(shù)即可)湿刽。
效果展示
總結(jié):
到這里的烁，文章就寫完了，這篇文章也沒多少干貨诈闺，只是在學(xué)習(xí)的時(shí)候做個(gè)有記錄渴庆，萬一以后有類似需求可以用上。因?yàn)閮?nèi)容簡(jiǎn)單雅镊，我就不放github地址了襟雷，如果有需要可以聯(lián)系我，如果喜歡我的文章記得關(guān)注我??哦仁烹！
