WebSocket是一种在Web浏览器和服务器之间进行全双工通信的协议。它允许在单个TCP连接上进行双向通信,而不需要通过多个HTTP请求-响应循环来实现。相比传统的HTTP请求,WebSocket提供了更低的延迟和更高的实时性。
本篇博客介绍WebSocket的基本概念,与http的区别和联系,然后介绍SpringBoot整合WebSocket,以及vue前端代码和效果展示。
1.WebSocket的基本概念,与http的区别和联系;
2.springboot整合WebSocket;
3.vue前端代码和效果展示;
WebSocket是一种在Web浏览器和服务器之间进行全双工通信的协议。它允许在单个TCP连接上进行双向通信,而不需要通过多个HTTP请求-响应循环来实现。相比传统的HTTP请求,WebSocket提供了更低的延迟和更高的实时性。
WebSocket协议通过在HTTP握手阶段升级连接来实现。一旦建立了WebSocket连接,客户端和服务器之间可以通过发送消息进行实时通信。这种双向通信的特性使得WebSocket非常适合实时聊天、实时数据更新、多人游戏等需要实时性的应用程序。
WebSocket协议是基于标准的TCP协议,可以在现代的Web浏览器和服务器上使用。它提供了一种更高效、更实时的通信方式,使得开发者能够构建更具交互性和实时性的Web应用程序。
WebSocket具有以下特点:
WebSocket提供了一种更高效、更实时、更可靠的通信方式,使得开发者能够构建更具交互性和实时性的Web应用程序。
WebSocket和HTTP有以下区别和联系:
区别:
联系:
<dependency>
<groupId>org.springframework.bootgroupId>
<artifactId>spring-boot-starter-websocketartifactId>
dependency>
package com.tianju.webChat.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();
}
}
server:
port: 10065
logging:
level:
com.tianju.socket: debug
package com.tianju.webChat.util;
import javax.websocket.RemoteEndpoint;
import javax.websocket.Session;
import java.io.IOException;
import java.util.Map;
import java.util.concurrent.ConcurrentHashMap;
/**
* 聊天室的工具类
*/
public class WebSocketUtil {
//放所有参与聊天的用户标识
public static final Map<String, Session> messageMap = new ConcurrentHashMap<>();
/**
*单个消息
*/
public static void send(Session session,String message){
if (session != null){
final RemoteEndpoint.Basic basic = session.getBasicRemote();
if (basic != null){
try {
basic.sendText(message);
} catch (IOException e) {
e.printStackTrace();
}
}
}
}
/**
* 全体发消息
*/
public static void sendAll(String message){
messageMap.forEach((userName,session) -> send(session,message));
}
}
package com.tianju.webChat.controller;
import com.tianju.webChat.util.WebSocketUtil;
import org.springframework.web.bind.annotation.RestController;
import javax.websocket.*;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
@RestController
@ServerEndpoint("/WebSocketHandler/{userName}")
public class WebChatController {
@OnOpen
public void openSession(@PathParam("userName") String userName, Session session){
String message = "欢迎:"+userName +"加入群聊";
WebSocketUtil.messageMap.put(userName,session);
//给所有人发消息
WebSocketUtil.sendAll(message);
}
@OnMessage
public void onMessage(@PathParam("userName") String userName, String message){
message = userName +":" +message;
WebSocketUtil.sendAll(message);
}
@OnClose
public void onClose(@PathParam("userName") String userName,Session session){
WebSocketUtil.messageMap.remove(userName);
WebSocketUtil.sendAll("用户:"+userName+"离开聊天室");
try {
session.close();
} catch (IOException e) {
e.printStackTrace();
}
}
}
package com.tianju.webChat;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.web.socket.config.annotation.EnableWebSocket;
@SpringBootApplication
@EnableWebSocket
public class WebChatApp {
public static void main(String[] args) {
SpringApplication.run(WebChatApp.class);
}
}
<template>
<div>
<el-row>
<el-col :span="6" :offset="3">
<p style="font-">真心聊天室</p>
</el-col>
</el-row>
<el-row>
<el-col :span="12" :offset="1"> <textarea id="textarea" disabled="disabled" cols="50" rows="10"></textarea></el-col>
</el-row>
<el-row>
<el-col :span="24">
<span> 用户名:</span>
<span> <el-input type="text" v-model="userName" /></span>
<span> <el-button type="primary" @click="join">加入聊天室</el-button></span>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<span> 发消息:</span>
<span> <el-input type="text" v-model="message" /></span>
<span> <el-button type="success" @click="send">发送</el-button></span>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
data() {
return {
url: 'ws://127.0.0.1:10065/WebSocketHandler/',
ws: '',
userName: '',
message: ''
}
},
methods: {
join() {
if (this.userName == "") {
alert("请输入您的大名!")
}
this.ws = new WebSocket(this.url + this.userName);
this.ws.onopen = function () {
console.log("连接成功!")
}
this.ws.onmessage = function (result) {
var textarea = document.getElementById("textarea");
textarea.append(result.data + '\n');
// 使textarea元素滚动到底部,显示最后一行文本
textarea.scrollTop = textarea.scrollHeight;
}
this.ws.onclose = function () {
var textarea = document.getElementById("textarea");
textarea.append('用户:' + this.userName + '离开聊天室 \n');
console.log("")
}
},
send() {
if (this.ws != null) {
this.ws.send(this.message);
this.message = "";
}
}
}
}
</script>
<style scoped>
p {
font-size: 20px;
color: red;
}
.el-row {
margin: 10px 5px;
}
span {
float: left;
}</style>
可以多人加入聊天
1.WebSocket的基本概念,与http的区别和联系;
2.springboot整合WebSocket;
3.vue前端代码和效果展示;