最近我學(xué)習(xí)了WebSocket，為了更好地掌握這一技術(shù)，我決定通過做一個項(xiàng)目來鞏固學(xué)習(xí)成果。在這個項(xiàng)目中，我將使用JavaScript和WebSocket來實(shí)現(xiàn)實(shí)時通信，讓客戶端和服務(wù)器端能夠?qū)崟r地傳遞和接收數(shù)據(jù)。通過這個項(xiàng)目，我希望能夠更深入地了解WebSocket的工作原理，并且能夠在實(shí)際應(yīng)用中靈活運(yùn)用這一技術(shù)。
1.技術(shù)棧
前端：vue3
后端：spring 框架
2.項(xiàng)目實(shí)現(xiàn)
1. 前端
1.項(xiàng)目初始化
這里使用vue ui 創(chuàng)建vue 項(xiàng)目，具體步驟可以參考這篇文章 Vue ui 初始化項(xiàng)目
2.項(xiàng)目目錄
自動生成的HelloWorld.vue文件可以刪除，這里只用創(chuàng)建一個Chat.vue文件
3. 開發(fā)頁面
項(xiàng)目選擇了Ant Design來作為UI框架，直接去Ant Design官網(wǎng)上去拿一個自己看得上的組件即可。Ant Designg官網(wǎng)地址
進(jìn)入網(wǎng)站后第一件事情是選擇一個角色，本項(xiàng)目只提供了三個可選角色分別是
1.精神小伙
2.美女刺客
3. 屌絲青年
這里我們通過一個走馬燈組件展示角色信息，直接在Ant Designg官網(wǎng)粘貼代碼即可
<template>
<div class="body">
<div class="character" v-if="isShow">
<a-carousel class="img" arrows :after-change="onChange">
<template #prevArrow>
<div class="custom-slick-arrow" style="left: 10px; z-index: 1">
<left-circle-outlined/>
</div>
</template>
<template #nextArrow>
<div class="custom-slick-arrow" style="right: 10px">
<right-circle-outlined/>
</div>
</template>
<div v-for="(item,i) in characterList" :key="i">
<img :src="item.url" alt="" mode="scaleToFill">
</div>
</a-carousel>
<div class="choose">
<button class="btn" @click="setCharcter">選擇角色</button>
</div>
</div>
</div>
</template>
<script setup>
import {LeftCircleOutlined, RightCircleOutlined} from '@ant-design/icons-vue';
import {ref, reactive} from 'vue'
import {message} from 'ant-design-vue';
//在線人數(shù)
var onlineNum = ref('0')
//在線列表
var onlineList = reactive([])
//是否顯示角色框
var isShow = ref(true)
var ws = null;
//角色的id
var id = ref(0)
//角色列表
var characterList = reactive(
[
{
url: require("/public/1.jpg"),
name: "精神小伙"
},
{
url: require("/public/2.jpeg"),
name: "美女刺客"
},
{
url: require("/public/3.jpg"),
name: "屌絲青年"
}
]
)
//切換輪播圖后觸發(fā)
const onChange = (current) => {
//得到當(dāng)前輪播圖的索引
id.value = current
};
//設(shè)置角色
const setCharcter = () => {
//選完角色后，要隱藏角色選擇框
isShow.value = false
//開啟webstocket服務(wù)的ip地址 ws:// + ip地址 + 訪問路徑
ws = new WebSocket('ws://localhost:80/chat/' + id.value);
//監(jiān)聽是否連接成功
ws.onopen = function () {
console.log('ws連接狀態(tài)：' + ws.readyState)
if (ws.readyState == 1) {
message.success('歡迎來到西里網(wǎng)管內(nèi)部群');
}
}
// 接聽服務(wù)器發(fā)回的信息并處理展示
ws.onmessage = function (data) {
var res = JSON.parse(data.data);
console.log(res)
//type為0表示是系統(tǒng)發(fā)送的信息，為 1 時表示時用戶發(fā)來的信息
if (res.type == 0) {
//得到在線人數(shù)
onlineNum.value = res.msg.length
onlineList = res.msg
} else {
var msg = {
content: "",
type: '',
id: ''
}
msg.type = '0'
msg.msg = res.msg
msg.id = res.id
msgList.push(msg)
console.log(res)
}
}
ws.onclose = function () {
// 監(jiān)聽整個過程中websocket的狀態(tài)
console.log('ws連接狀態(tài)：' + ws.readyState);
ws.close();
}
// 監(jiān)聽并處理error事件
ws.onerror = function (error) {
console.log(error);
}
//監(jiān)聽窗口關(guān)閉事件，當(dāng)窗口關(guān)閉時，主動去關(guān)閉websocket連接，防止連接還沒斷開就關(guān)閉窗口，server端會拋異常。
window.onbeforeunload = function () {
ws.close();
}
}
</script>
<style scoped lang="less">
.body{
color: #fff;
font-weight: 900;
letter-spacing: 2px;
width: 100%;
height: 100%;
background-image: url("/public/5.gif");
background-size: 50%;
display: flex;
align-items: center;
}
.character {
border-radius: 10px;
z-index: 10;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(255, 255, 255, .8);
width: 300px;
height: 400px;
.img {
width: 200px;
height: 300px;
margin: 10px auto;
overflow: hidden;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.btn {
margin-top: 20px;
background-color: dodgerblue;
padding: 10px;
border: transparent 1px solid;
border-radius: 3px;
}
}
:deep(.slick-slide) {
text-align: center;
height: 100%;
line-height: 100%;
background: #364d79;
overflow: hidden;
}
:deep(.slick-arrow.custom-slick-arrow) {
width: 25px;
height: 25px;
font-size: 25px;
color: #fff;
background-color: rgba(31, 45, 61, 0.11);
transition: ease all 0.3s;
opacity: 0.3;
z-index: 1;
}
:deep(.slick-arrow.custom-slick-arrow:before) {
display: none;
}
:deep(.slick-arrow.custom-slick-arrow:hover) {
color: #fff;
opacity: 0.5;
}
:deep(.slick-slide h3) {
color: #fff;
}
</style>
運(yùn)行截圖
開發(fā)聊天框
js 代碼
//聊天框
const value = ref('');
const msgList = reactive([])
var sendMessage = (msg) => {
if (msg.trim() !== '') {
// 將消息發(fā)送到服務(wù)器
ws.send(msg);
}
}
const onSend = () => {
sendMessage(value.value)
var msg = {
content: "",
type: '',
id: ''
}
//type為 1代表自己發(fā)的消息 type為 0代表別人發(fā)的消息
msg.type = '1'
msg.msg = value.value
msgList.push(msg)
console.log(msgList)
value.value = ''
};
html
<div class="container">
<div class="left">
<div class="top">
在線人數(shù)
<Icon type="ios-at-outline"/>
<span>{{ onlineNum }}人</span>
</div>
<div class="list">
<div class="item" v-for="(item,i) in onlineList" :key="i">
<img :src="characterList[parseInt(item)].url" alt="" mode="scaleToFill">
<span>{{ characterList[parseInt(item)].name }}</span>
</div>
</div>
</div>
<div class="right">
<div class="top">
西??網(wǎng)管
</div>
<div class="chat">
<div v-for="(item,i) in msgList" :key="i" :class="item.type=='1'?'rightMsg':'leftMsg'">
<img v-if="item.type=='0'" :src="characterList[parseInt(item.id)].url" alt="">
<div class="msg">{{ item.msg }}</div>
<img v-if="item.type=='1'" :src='characterList[parseInt(id)].url' alt="">
</div>
</div>
<div class="bottom">
<input
v-model="value"
placeholder="input text"
/>
<button @click="onSend">發(fā)送</button>
</div>
</div>
</div>
css
.container {
z-index: 1;
border: solid 1px #2c3e50;
width: 90%;
height: 95%;
margin: auto;
display: flex;
justify-content: center;
.left {
width: 20%;
height: 100%;
background-color: rgba(0, 0, 0, .5);
.top {
height: 30px;
border-bottom: solid 1px #2c3e50;
border-right: solid 1px #2c3e50;
color: #fff;
line-height: 30px;
font-weight: bolder;
}
.item {
height: 70px;
display: flex;
flex-direction: row;
justify-content: start;
align-items: center;
width: 100%;
border-bottom: 1px gray solid;
img {
width: 40px;
height: 40px;
border-radius: 20px;
overflow: hidden;
object-fit: cover;
margin: 0 10px;
}
span {
font-size: 14px;
text-align: start;
}
}
}
.right {
flex: 1;
background-color: transparent !important;
display: flex;
flex-direction: column;
.top {
height: 70px;
background-color: rgba(0, 0, 0, .5);
width: 100%;
font-size: 22px;
text-align: center;
line-height: 70px;
}
.chat {
flex: 1;
.leftMsg,
.rightMsg {
display: flex;
flex-direction: row;
justify-content: start;
align-items: center;
margin: 10px;
img {
width: 40px;
height: 40px;
border-radius: 20px;
overflow: hidden;
object-fit: cover;
margin: 0 10px;
}
.msg {
display: inline-block;
padding: 10px;
word-wrap: anywhere;
max-width: 500px;
background-color: #364d79;
border-radius: 10px;
}
}
.rightMsg {
justify-content: end;
.msg {
color: black;
background-color: white;
}
}
}
.bottom {
height: 100px;
display: flex;
align-items: center;
width: 80%;
margin: 10px auto;
input {
width: 90%;
border: none;
outline: none;
height: 40px;
color: black;
text-indent: 2px;
line-height: 40px;
border-radius: 10px 0 0 10px;
}
button {
width: 10%;
border: none;
outline: none;
height: 40px;
line-height: 40px;
border-radius: 0 10px 10px 0;
background-color: dodgerblue;
}
}
}
}
運(yùn)行結(jié)果
前端完整代碼
<template>
<div class="body">
<div class="container">
<div class="left">
<div class="top">
在線人數(shù)
<Icon type="ios-at-outline"/>
<span>{{ onlineNum }}人</span>
</div>
<div class="list">
<div class="item" v-for="(item,i) in onlineList" :key="i">
<img :src="characterList[parseInt(item)].url" alt="" mode="scaleToFill">
<span>{{ characterList[parseInt(item)].name }}</span>
</div>
</div>
</div>
<div class="right">
<div class="top">
西??網(wǎng)管
</div>
<div class="chat">
<div v-for="(item,i) in msgList" :key="i" :class="item.type=='1'?'rightMsg':'leftMsg'">
<img v-if="item.type=='0'" :src="characterList[parseInt(item.id)].url" alt="">
<div class="msg">{{ item.msg }}</div>
<img v-if="item.type=='1'" :src='characterList[parseInt(id)].url' alt="">
</div>
</div>
<div class="bottom">
<input
v-model="value"
placeholder="input text"
/>
<button @click="onSend">發(fā)送</button>
</div>
</div>
</div>
<div class="character" v-if="isShow">
<a-carousel class="img" arrows :after-change="onChange">
<template #prevArrow>
<div class="custom-slick-arrow" style="left: 10px; z-index: 1">
<left-circle-outlined/>
</div>
</template>
<template #nextArrow>
<div class="custom-slick-arrow" style="right: 10px">
<right-circle-outlined/>
</div>
</template>
<div v-for="(item,i) in characterList" :key="i">
<img :src="item.url" alt="" mode="scaleToFill">
</div>
</a-carousel>
<div class="choose">
<button class="btn" @click="setCharcter">選擇角色</button>
</div>
</div>
</div>
</template>
<script setup>
import {LeftCircleOutlined, RightCircleOutlined} from '@ant-design/icons-vue';
import {ref, reactive} from 'vue'
import {message} from 'ant-design-vue';
//在線人數(shù)
var onlineNum = ref('0')
//在線列表
var onlineList = reactive([])
//是否顯示角色框
var isShow = ref(true)
var ws = null;
//角色的id
var id = ref(0)
//角色列表
var characterList = reactive(
[
{
url: require("/public/1.jpg"),
name: "精神小伙"
},
{
url: require("/public/2.jpeg"),
name: "美女刺客"
},
{
url: require("/public/3.jpg"),
name: "屌絲青年"
}
]
)
//切換輪播圖后觸發(fā)
const onChange = (current) => {
//得到當(dāng)前輪播圖的索引
id.value = current
};
//設(shè)置角色
const setCharcter = () => {
//選完角色后，要隱藏角色選擇框
isShow.value = false
//開啟webstocket服務(wù)的ip地址 ws:// + ip地址 + 訪問路徑
ws = new WebSocket('ws://localhost:80/chat/' + id.value);
//監(jiān)聽是否連接成功
ws.onopen = function () {
console.log('ws連接狀態(tài)：' + ws.readyState)
if (ws.readyState == 1) {
message.success('歡迎來到西里網(wǎng)管內(nèi)部群');
}
}
// 接聽服務(wù)器發(fā)回的信息并處理展示
ws.onmessage = function (data) {
var res = JSON.parse(data.data);
console.log(res)
//type為0表示是系統(tǒng)發(fā)送的信息，為 1 時表示時用戶發(fā)來的信息
if (res.type == 0) {
//得到在線人數(shù)
onlineNum.value = res.msg.length
onlineList = res.msg
} else {
var msg = {
content: "",
type: '',
id: ''
}
msg.type = '0'
msg.msg = res.msg
msg.id = res.id
msgList.push(msg)
console.log(res)
}
}
ws.onclose = function () {
// 監(jiān)聽整個過程中websocket的狀態(tài)
console.log('ws連接狀態(tài)：' + ws.readyState);
ws.close();
}
// 監(jiān)聽并處理error事件
ws.onerror = function (error) {
console.log(error);
}
//監(jiān)聽窗口關(guān)閉事件，當(dāng)窗口關(guān)閉時，主動去關(guān)閉websocket連接，防止連接還沒斷開就關(guān)閉窗口，server端會拋異常。
window.onbeforeunload = function () {
ws.close();
}
}
//聊天框
const value = ref('');
const msgList = reactive([])
var sendMessage = (msg) => {
if (msg.trim() !== '') {
// 將消息發(fā)送到服務(wù)器
ws.send(msg);
}
}
const onSend = () => {
sendMessage(value.value)
var msg = {
content: "",
type: '',
id: ''
}
//type為 1代表自己發(fā)的消息 type為 0代表別人發(fā)的消息
msg.type = '1'
msg.msg = value.value
msgList.push(msg)
console.log(msgList)
value.value = ''
};
</script>
<style scoped lang="less">
.body {
color: #fff;
font-weight: 900;
letter-spacing: 2px;
width: 100%;
height: 100%;
background-image: url("/public/5.gif");
background-size: 50%;
display: flex;
align-items: center;
position: relative;
}
.character {
border-radius: 10px;
z-index: 10;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(255, 255, 255, .8);
width: 300px;
height: 400px;
.img {
width: 200px;
height: 300px;
margin: 10px auto;
overflow: hidden;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.btn {
margin-top: 20px;
background-color: dodgerblue;
padding: 10px;
border: transparent 1px solid;
border-radius: 3px;
}
}
.body {
:deep(.slick-slide) {
text-align: center;
height: 100%;
line-height: 100%;
background: #364d79;
overflow: hidden;
}
:deep(.slick-arrow.custom-slick-arrow) {
width: 25px;
height: 25px;
font-size: 25px;
color: #fff;
background-color: rgba(31, 45, 61, 0.11);
transition: ease all 0.3s;
opacity: 0.3;
z-index: 1;
}
:deep(.slick-arrow.custom-slick-arrow:before) {
display: none;
}
:deep(.slick-arrow.custom-slick-arrow:hover) {
color: #fff;
opacity: 0.5;
}
:deep(.slick-slide h3) {
color: #fff;
}
}
.container {
z-index: 1;
border: solid 1px #2c3e50;
width: 90%;
height: 95%;
margin: auto;
display: flex;
justify-content: center;
.left {
width: 20%;
height: 100%;
background-color: rgba(0, 0, 0, .5);
.top {
height: 30px;
border-bottom: solid 1px #2c3e50;
border-right: solid 1px #2c3e50;
color: #fff;
line-height: 30px;
font-weight: bolder;
}
.item {
height: 70px;
display: flex;
flex-direction: row;
justify-content: start;
align-items: center;
width: 100%;
border-bottom: 1px gray solid;
img {
width: 40px;
height: 40px;
border-radius: 20px;
overflow: hidden;
object-fit: cover;
margin: 0 10px;
}
span {
font-size: 14px;
text-align: start;
}
}
}
.right {
flex: 1;
background-color: transparent !important;
display: flex;
flex-direction: column;
.top {
height: 70px;
background-color: rgba(0, 0, 0, .5);
width: 100%;
font-size: 22px;
text-align: center;
line-height: 70px;
}
.chat {
flex: 1;
.leftMsg,
.rightMsg {
display: flex;
flex-direction: row;
justify-content: start;
align-items: center;
margin: 10px;
img {
width: 40px;
height: 40px;
border-radius: 20px;
overflow: hidden;
object-fit: cover;
margin: 0 10px;
}
.msg {
display: inline-block;
padding: 10px;
word-wrap: anywhere;
max-width: 500px;
background-color: #364d79;
border-radius: 10px;
}
}
.rightMsg {
justify-content: end;
.msg {
color: black;
background-color: white;
}
}
}
.bottom {
height: 100px;
display: flex;
align-items: center;
width: 80%;
margin: 10px auto;
input {
width: 90%;
border: none;
outline: none;
height: 40px;
color: black;
text-indent: 2px;
line-height: 40px;
border-radius: 10px 0 0 10px;
}
button {
width: 10%;
border: none;
outline: none;
height: 40px;
line-height: 40px;
border-radius: 0 10px 10px 0;
background-color: dodgerblue;
}
}
}
}
</style>
2. 后端部分
- 導(dǎo)入maven坐標(biāo)
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
3). 定義WebSocket服務(wù)端組件
package com.example.chat;
/**
* @author 余煒
* @version 1.0
*/
import com.alibaba.fastjson.JSONObject;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Component;
import javax.websocket.*;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.*;
import java.util.concurrent.ConcurrentHashMap;
/**
* @ServerEndpoint 注解是一個類層次的注解，它的功能主要是將目前的類定義成一個websocket服務(wù)器端,
* 注解的值將被用于監(jiān)聽用戶連接的終端訪問URL地址,客戶端可以通過這個URL來連接到WebSocket服務(wù)器端
*/
@ServerEndpoint("/chat/{id}")
@Component
@Slf4j
public class Websocket {
//記錄連接的客戶端
public static Map<String, Session> clients = new ConcurrentHashMap<>();
//0:連接成功系統(tǒng)發(fā)送信息 1:用戶發(fā)送的消息
@OnOpen
public void onOpen(Session session, @PathParam("id") String id) {
clients.put(id, session);
//獲取在線用戶的id
List<String> onlineList = new ArrayList<>();
for (String key : clients.keySet()) {
onlineList.add(key);
}
Websocket.sendMessage(new response<List<String>>(0, id, onlineList), session);
}
/**
* 連接關(guān)閉調(diào)用的方法
*/
@OnClose
public void onClose(@PathParam("id") String id) {
log.info(id + "連接斷開！");
clients.remove(id);
}
/**
* 判斷是否連接的方法
*
* @return
*/
public static boolean isServerClose() {
if (Websocket.clients.values().size() == 0) {
log.info("已斷開");
return true;
} else {
log.info("已連接");
return false;
}
}
/**
* 發(fā)送給所有用戶
*
* @param
*/
public static void sendMessage(response response, Session session) {
String message = JSONObject.toJSONString(response);
for (Session session1 : Websocket.clients.values()) {
try {
//判斷一下是不是系統(tǒng)發(fā)送的信息，和是不是自己發(fā)送的信息
if (response.getType() == 0 || !session.equals(session1))
session1.getBasicRemote().sendText(message);
} catch (IOException e) {
e.printStackTrace();
}
}
}
/**
* 收到客戶端消息后調(diào)用的方法
*
* @param message
* @param session
*/
@OnMessage
public void onMessage(String message, Session session, @PathParam("id") String id) {
sendMessage(new response<String>(1, id, message), session);
}
/**
* 發(fā)生錯誤時的回調(diào)函數(shù)
*
* @param error
*/
@OnError
public void onError(Throwable error) {
log.info("錯誤");
error.printStackTrace();
}
}
4). 定義配置類，注冊WebSocket的服務(wù)端組件
package com.example.chat.config;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;
/**
* @author 余煒
* @version 1.0
*/
/**
* 開啟WebSocket支持
*/
@Configuration
public class webSocketConfig {
@Bean
public ServerEndpointExporter serverEndpointExporter() {
return new ServerEndpointExporter();
}
}
封裝一個回復(fù)實(shí)體類文章來源：http://www.zghlxwxcb.cn/news/detail-757466.html
package com.example.chat;
import lombok.AllArgsConstructor;
import lombok.Data;
/**
* @author 余煒
* @version 1.0
*/
@Data
@AllArgsConstructor
public class response<T> {
private int type;
private String id;
private T msg;
}
結(jié)語
本次項(xiàng)目實(shí)戰(zhàn)分享到此圓滿結(jié)速，希望能對那些正在探索或已經(jīng)踏入WebSocket領(lǐng)域的讀者們有所幫助。我希望這篇博客能激發(fā)你的興趣，讓你對WebSocket有更深的理解，同時也希望你能在評論區(qū)分享你的經(jīng)驗(yàn)和觀點(diǎn)，讓我們一起學(xué)習(xí)，一起進(jìn)步。再次感謝你閱讀我的博客，期待你的反饋和參與！讓我們一起在學(xué)習(xí)的道路上一起前行，共同探索技術(shù)的無盡可能。文章來源地址http://www.zghlxwxcb.cn/news/detail-757466.html
到了這里，關(guān)于【W(wǎng)ebSocket項(xiàng)目實(shí)戰(zhàn)】聊天室（前端vue3、后端spring框架）的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
