文章目录
1.什么是websocket协议?2.与http协议的不同3.代码实现3.1导入pom.xml3.2编写websocketCofig类3.3实现websocket协议类3.4前端页面3.5App启动类
1.什么是websocket协议?
WebSocket是HTML5中的协议， 他是为了解决客户端发起多个http请求到服务器资源浏览器必须要经过长时间的轮训问题而生的，他实现了多路复用，他是全双工通信。在webSocket协议下客服端和浏览器可以同时发送信息。
2.与http协议的不同
区别httpwebsocket
链接方式http1.0即普通http请求，一般都是短链接，一次请求，三次握手，完毕之后立即断开其实websocket是http协议的升级，http1.1版本默认长链接，长链接代表：一次链接，在一定限期内保持着链接，保持tcp不断开，双方都可以即时通讯，是一种全双工通信协议场景http协议更适合普通文件请求，不适合即时通讯，一般我们要得到及时信息，通过http方式，我们就需要不断的轮询，网络资源消耗大websocket更适合做即及时通讯，不需要不断的轮询，一次链接，长时间有效
3.代码实现
3.1导入pom.xml
<project xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0
</modelVersion>
<parent>
<groupId>org.springframework.boot
</groupId>
<artifactId>spring-boot-starter-parent
</artifactId>
<version>2.3.1.RELEASE
</version>
</parent>
<groupId>com.liuhao.springboot
</groupId>
<artifactId>springboot-websocket
</artifactId>
<version>0.0.1-SNAPSHOT
</version>
<name>springboot-websocket
</name>
<dependencies>
<dependency>
<groupId>org.springframework.boot
</groupId>
<artifactId>spring-boot-starter
</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot
</groupId>
<artifactId>spring-boot-starter-web
</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot
</groupId>
<artifactId>spring-boot-starter-websocket
</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot
</groupId>
<artifactId>spring-boot-starter-thymeleaf
</artifactId>
</dependency>
</dependencies>
</project>
3.2编写websocketCofig类
package com
.liuhao
.application
.config
;
import org
.springframework
.context
.annotation
.Bean
;
import org
.springframework
.context
.annotation
.Configuration
;
import org
.springframework
.web
.socket
.server
.standard
.ServerEndpointExporter
;
@Configuration
public class WebSocketConfig {
@Bean
public ServerEndpointExporter
serverEndpointExporter() {
return new ServerEndpointExporter();
}
}
3.3实现websocket协议类
package com
.liuhao
.application
.pojo
;
import java
.io
.IOException
;
import java
.util
.Map
.Entry
;
import java
.util
.concurrent
.ConcurrentHashMap
;
import javax
.websocket
.OnClose
;
import javax
.websocket
.OnMessage
;
import javax
.websocket
.OnOpen
;
import javax
.websocket
.Session
;
import javax
.websocket
.server
.PathParam
;
import javax
.websocket
.server
.ServerEndpoint
;
import org
.springframework
.stereotype
.Component
;
@ServerEndpoint("/websocket/{sid}")
@Component
public class WebSocketServer {
private static ConcurrentHashMap
<String, Session> map
= new ConcurrentHashMap<String, Session>();
private Session session
;
private String sid
= "";
@OnOpen
public void onOpen(Session session
, @PathParam("sid") String sid
) {
this.session
= session
;
this.sid
= sid
;
System
.out
.println("有一个连接sid:" + this.sid
);
this.map
.put(this.sid
, this.session
);
}
@OnClose
public void onClose() {
try {
this.map
.remove(this.sid
);
this.session
.close();
System
.out
.println("sid:" + sid
+ "会话被关闭，移除");
} catch (IOException e
) {
e
.printStackTrace();
}
}
@OnMessage
public void onMessage(String message
) {
try {
System
.out
.println("message:" + message
);
for (Entry
<String, Session> entry
: map
.entrySet()) {
entry
.getValue().getBasicRemote().sendText(message
);
}
} catch (Exception e
) {
e
.printStackTrace();
}
}
public void sendMassage(String massage
) {
try {
this.session
.getBasicRemote().sendText(massage
);
} catch (Exception e
) {
e
.printStackTrace();
}
}
}
3.4前端页面
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template
</title>
<link rel="stylesheet" type="text/css" href="../css/bootstrap.css" />
<script src="../js/Vue2.6.11.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<div class="container">
<form action="" method="">
<div class="row">
<div class="form-group col-md-6">
<label>信息展示：
</label>
<textarea class="form-control" rows="10" cols="" v-model="showContent"></textarea>
</div>
<div class="col-md-6">
<div class="row">
<div class="form-group col-md-12">
<label>发送人ID：
</label>
<input type="text" class="form-control" name="" v-model="id" />
</div>
</div>
<div class="row">
<div class="form-group col-md-12">
<label>发送信息：
</label>
<textarea class="form-control" rows="6" cols="" v-model="sendContent"></textarea>
</div>
</div>
<div class="row">
<div class="form-group col-md-6">
<button type="button" class="btn btn-primary btn-block" @click="sendMsg()">点击发送
</button>
</div>
<div class="form-group col-md-6">
<button type="button" class="btn btn-danger btn-block" @click="connect()">连接
</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
id: '',
showContent: '',
sendContent: '',
socket: null
},
methods: {
connect: function() {
var lsocket;
if (typeof(WebSocket) == "undefined") {
console.log("您的浏览器不支持WebSocket，请更换浏览器");
return;
} else {
console.log("您的浏览器支持WebSocket");
if (this.id.trim() == "") {
alert('连接之前必须指定唯一ID')
return
}
lsocket = new WebSocket("ws://localhost:8080/websocket/" + this.id)
this.socket = lsocket
this.socket.onopen = function() {
console.log('连接已开放')
}
this.socket.onerror = function() {
alert('websocket出现error')
}
this.socket.onmessage = function(msg) {
console.log(msg)
vm.showContent += msg.data
}
}
},
sendMsg: function() {
if(this.sendContent.trim()==""||this.socket==null)
{
alert('不能发送空的信息哦，发送信息前，要先连接')
return
}
this.socket.send(this.sendContent)
this.sendContent=''
}
},
created: function() {
}
})
</script>
</body>
</html>
3.5App启动类
package com
.liuhao
.application
;
import org
.springframework
.boot
.SpringApplication
;
import org
.springframework
.boot
.autoconfigure
.SpringBootApplication
;
@SpringBootApplication
public class App {
public static void main(String
[] args
) {
SpringApplication
.run(App
.class, args
);
}
}
