【WebSocket项目实战】聊天室（前端vue3、后端spring框架）_web前端 vue3 聊天窗口

最近我学习了WebSocket，为了更好地掌握这一技术，我决定通过做一个项目来巩固学习成果。在这个项目中，我将使用JavaScript和WebSocket来实现实时通信，让客户端和服务器端能够实时地传递和接收数据。通过这个项目，我希望能够更深入地了解WebSocket的工作原理，并且能够在实际应用中灵活运用这一技术。

1.技术栈

前端：vue3
后端：spring 框架

2.项目实现

1. 前端

1.项目初始化

这里使用vue ui 创建vue 项目，具体步骤可以参考这篇文章 Vue ui 初始化项目

2.项目目录

自动生成的HelloWorld.vue文件可以删除，这里只用创建一个Chat.vue文件

3. 开发页面

项目选择了Ant Design来作为UI框架，直接去Ant Design官网上去拿一个自己看得上的组件即可。Ant Designg官网地址
进入网站后第一件事情是选择一个角色，本项目只提供了三个可选角色分别是
1.精神小伙

2.美女刺客
3. 屌丝青年

这里我们通过一个走马灯组件展示角色信息，直接在Ant Designg官网粘贴代码即可

<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';
//在线人数
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: "屌丝青年"
      }
    ]
)
//切换轮播图后触发
const onChange = (current) => {
  //得到当前轮播图的索引
  id.value = current
};
//设置角色
const setCharcter = () => {
  //选完角色后，要隐藏角色选择框
  isShow.value = false

  //开启webstocket服务的ip地址  ws:// + ip地址 + 访问路径
  ws = new WebSocket('ws://localhost:80/chat/' + id.value);

  //监听是否连接成功
  ws.onopen = function () {
    console.log('ws连接状态：' + ws.readyState)
    if (ws.readyState == 1) {
      message.success('欢迎来到西里网管内部群');
    }
  }
// 接听服务器发回的信息并处理展示
  ws.onmessage = function (data) {

    var res = JSON.parse(data.data);

    console.log(res)
    //type为0表示是系统发送的信息，为 1 时表示时用户发来的信息
    if (res.type == 0) {
      //得到在线人数
      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 () {
    // 监听整个过程中websocket的状态
    console.log('ws连接状态：' + ws.readyState);
    ws.close();
  }
// 监听并处理error事件
  ws.onerror = function (error) {
    console.log(error);
  }
//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208

运行截图

开发聊天框
js 代码

//聊天框
const value = ref('');
const msgList = reactive([])
var sendMessage = (msg) => {
  if (msg.trim() !== '') {
    // 将消息发送到服务器
    ws.send(msg);
  }
}
const onSend = () => {
  sendMessage(value.value)
  var msg = {
    content: "",
    type: '',
    id: ''
  }
  //type为 1代表自己发的消息 type为 0代表别人发的消息
  msg.type = '1'
  msg.msg = value.value
  msgList.push(msg)
  console.log(msgList)
  value.value = ''

};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

html

  <div class="container">
      <div class="left">
        <div class="top">
          在线人数
          <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">
          西声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：【wpsshop博客】