# SpringBoot Vue WebSocket实现多人聊天_spring vue3 websocket

Vue WebSocket实现聊天

SpringBoot后端代码

1.引入Websocket依赖

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
1
2
3
4

2.配置websocket

@ServerEndpoint(value = "/chat/{fromUser}")
@Component
public class MyWebsocket {

    private static Logger log = LoggerFactory.getLogger(MyWebsocket.class);
    private Session session;

    /**
     * 在线用户列表
     */
    public static Map<String, Session> sessionPool = new HashMap();
    @OnOpen
    public void onOpen(Session session, @PathParam(value = "fromUser") String fromUser) {
        this.session = session;
        sessionPool.put(fromUser, session);
        System.out.println(fromUser + "【websocket消息】有新的连接，总数为:" + sessionPool.size());
    }

    @OnClose
    public void onClose() {
        sessionPool.remove(this);
        System.out.println("【websocket消息】连接断开，总数为:" + sessionPool.size());

    }

    @OnMessage
    public void onMessage(String msg) {
        log.info("【websocket消息】收到客户端消息:" + msg);
        String resoult = msg;
        Map<String, Object> map = JsonUtils.toMap(msg);
        String toUser = (String) map.get("toUser");
        String ms = (String) map.get("msg");
        String account = (String) map.get("fromUser");
        sendOneMessage(account, toUser, ms);
    }
    /**
     * 此为单点消息
     */
    public void sendOneMessage(String account, String userName, String message) {
        try {
            log.info("【websocket消息】单点消息:" + message);
            Session session = sessionPool.get(userName);
            sessionPool.get(userName);
            try {
                //将信息保存到message表中
                Record record=new Record();
                record.set("date",TimeUtils.getCurrentTime());
                record.set("touser",userName);
                record.set("fromuser",account);
                record.set("type","test");
                record.set("message",message);
                Db.save("message","id",record);
            } catch (Exception e) {
                log.info(e.getMessage());
            }

            ChatMessage chatMessage = new ChatMessage();
            chatMessage.setToUser(userName);
            chatMessage.setMsg(message);
            chatMessage.setFromUser(account);
            chatMessage.setType("test");
            String time = TimeUtils.getCurrentTime();
            chatMessage.setTime(time);
            String s = JsonUtils.toJSONString(chatMessage);
            if (session != null) {
                session.getAsyncRemote().sendText(s);
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}
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

Vue前端展示

1.完整代码chat.vue

<template>
  <div>
    <!--弹出层查看用户历史发送的消息 -->
    <el-dialog
      title="历史消息"
      :visible.sync="dialogFormVisible"
      width="900px"
      top="200px"
    >
      <el-table :data="tableData" height="250" border style="width: 100%">
        <el-table-column prop="date" label="日期" width="180">
        </el-table-column>
        <el-table-column prop="fromuser" label="发送者" width="180">
        </el-table-column>
        <el-table-column prop="touser" label="接收者"> </el-table-column>
        <el-table-column prop="message" label="信息"> </el-table-column>
      </el-table>
    </el-dialog>

    <el-row type="flex" justify="center">
      <el-col :md="14">
        <el-card
          :body-style="{ padding: '10px' }"
          style="background-color: #E8E8E8; border: 1px solid #DDDDDD; border-bottom: 0;"
        >
          <div style="height: 20px;">
            <div
              style="width: 20px; height: 20px; background-color: #DF7065; border-radius: 50%; float: left;"
              @click="webSokcetClose()"
            ></div>
            <div
              style="width: 20px; height: 20px; background-color: #E6BB46; border-radius: 50%; float: left; margin-left: 10px;"
            ></div>
            <div
              style="width: 20px; height: 20px; background-color: #5BCC8B; border-radius: 50%; float: left; margin-left: 10px;"
            ></div>
            <div>
              <el-button
                style="margin-left: 10px;"
                size="mini"
                type="success"
                icon="el-icon-check"
                circle
                @click="getMessage()"
              ></el-button>
            </div>
          </div>
        </el-card>
        <el-card
          :body-style="{ padding: '0' }"
          style="border: 1px solid #DDDDDD; border-top: 0;"
        >
          <el-row>
            <el-col
              :md="6"
              style=" height: 600px; border-right: 2px solid #DDDDDD; overflow: auto;"
            >
              <el-card
                :body-style="{
                  'padding-top': '11px',
                  'padding-bottom': '12px',
                  'padding-left': '10px',
                  'padding-right': '12px'
                }"
                shadow="never"
              >
                <div>
                  <el-input
                    size="mini"
                    placeholder="请输入内容"
                    v-model="input1"
                  >
                  </el-input>
                </div>
              </el-card>
              <div v-for="item in listUser" :key="item.id">
                <a href="javascript:void(0);" @click="toggleChat(item.account)">
                  <el-card :body-style="{ padding: '5px 10px' }" shadow="never">
                    <el-row>
                      <el-col :span="7">
                        <el-image
                          style="width: 40px; height: 40px; border-radius: 50%;"
                          src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
                          fit="cover"
                        ></el-image>
                      </el-col>
                      <el-col :span="17">
                        <h4
                          class="m-0"
                          style="color: #666666; font-size: 15px;"
                        >
                          {{ item.account }}
                        </h4>
                        <p
                          style="color: #999999; font-size: 12px; margin: 0; margin-top: 3px;"
                          class="limitTitleDirectory"
                        >
                          这个家伙很懒，什么也没有留下。
                        </p>
                      </el-col>
                    </el-row>
                  </el-card>
                </a>
              </div>
            </el-col>
            <el-col :md="18">
              <div v-show="toUser !== '游客'">
                <el-card :body-style="{ padding: '15px' }" shadow="never">
                  <div class="text-center">
                    <p class="m-0">{{ toUser }}</p>
                  </div>
                </el-card>
                <el-card :body-style="{ padding: '5px' }" shadow="never">
                  <div
                    v-for="item in this.listUser"
                    :key="item.id"
                    v-show="toUser === item.account"
                    :id="item.account"
                    style="height: 327px; overflow: auto;"
                  ></div>
                </el-card>
                <el-input
                  type="textarea"
                  :rows="5"
                  v-model="input"
                  @keyup.enter.native="webSokcetSend()"
                  style="margin-top:60px"
                ></el-input>
              </div>
              <div v-show="toUser === '游客'">
                <div
                  style="text-align: center; line-height: 600px; background-color: #f3f3f3;"
                >
                  <p style="margin: 0; font-size: 22px; color: #909399;">
                    没有会话消息
                  </p>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getOnlineuser } from "@/api/chat";
import { formatTime } from "@/utils/TimeUtils";
import { getMessage } from "@/api/chat";
export default {
  name: "mac",
  data() {
    return {
      input: "",
      input1: "",
      //在线人数
      listUser: [],
      webSocket: "",
      fromUser: "游客",
      toUser: "游客",

      tableData: "",
      dialogFormVisible: false //弹出层默认为关闭
    };
  },
  created() {
     //得到在线人数
    getOnlineuser("/ws/getOnlineuser").then(res => {
      if (res.code === 200) {
        this.listUser = res.data;
      } else if (res.code === 500) {
        this.$message(res.data);
      }
    });
    this.fromUser = localStorage.getItem("username");
  },
  mounted() {
    if (document.cookie === "") {
      this.webSokcetClose();
    } else {
    }
    //配置websocket服务器地址
    this.webSocket = new WebSocket("ws://localhost:8001/chat/" + this.fromUser);
    this.initWebSocket();
  },
  methods: {
    initWebSocket() {
      this.webSocket.onerror = this.onError; // 通讯异常
      this.webSocket.onopen = this.onOpen; // 连接成功
      this.webSocket.onmessage = this.onMessage; // 收到消息时回调
      this.webSocket.onclose = this.onClose; // 连接关闭时回调
    },
    onError() {
      console.log("通讯异常");
    },
    onOpen() {
      console.log("通讯开始");
    },
    onMessage(event) {
      console.log(event.data);
      let data = JSON.parse(event.data);
      // console.log(data);
      if (data.list !== undefined) {
        let list = data.list;
        for (let i = 0; i < list.length; i++) {
          if (list[i] === this.fromUser) {
            list.splice(i, 1);
          }
        }
        this.listUser = list;
      }
      this.messageDiv(event.data);
      console.log(event.data);
    },
    onClose() {
      console.log("通讯关闭");
    },
    webSokcetSend() {
      var now = new Date();
      var strnow = formatTime(now);
      /*
       * 发送消息
       * */
      let message = JSON.stringify({
        fromUser: this.fromUser,
        toUser: this.toUser,
        msg: this.input,
        time: this.strnow
      });
      this.webSocket.send(message);
      this.input = "";
      this.messageDiv(message);
    },
    webSokcetClose() {
    },
    toggleChat(toUser) {
      this.toUser = toUser;
    },
    messageDiv(data1) {
      let data = JSON.parse(data1);
      let div = document.createElement("div");
      let p1 = document.createElement("p");
      let p = document.createElement("p");
      if (data.time == null) {
        data.time = formatTime(new Date());
      }
      p1.innerHTML = data.fromUser + " " + data.time;
      debugger;
      if (data.fromUser !== "系统通知") {
        if (data.type !== undefined) {
          /*
           * data.type !== undefined
           * 说明这是接收到消息
           * 把值插到发送者的div
           * */
          // let fromUser = document.getElementById("test");
          let fromUser = document.getElementById(data.fromUser);
          p.innerHTML = "收到：" + data.msg;
          div.style =
            "width: 500px; float: left; margin-left: 15px; margin-top:10px; ";
          p1.style =
            "font-size: 15px; margin-bottom: 0; margin-top: 0; float: left; font-weight: 500; ";
          p.style =
            "padding: 10px; background-color: #F1F1F1; margin-top: 25px; margin-bottom: 10px; word-wrap : break-word; ";
          div.appendChild(p1);
          div.appendChild(p);

          fromUser.appendChild(div);
          fromUser.scrollTop = fromUser.scrollHeight;
          if (fromUser.style.display === "none") {
            // console.log("有新的消息未查看！");
            this.$message("收到新的消息");
          }
        } else {
          /*
           * 说明这是发送消息
           * 把值插到接收者的div
           * */
          // let toUser = document.getElementById("test");
          let toUser = document.getElementById(data.toUser);
          p.innerHTML = "发出：" + data.msg;
          div.style =
            "width: 500px; float: right; margin-right: 15px; margin-top: 10px;";
          p1.style =
            "font-size: 15px; margin-bottom: 0; margin-top: 0; float: right; font-weight: 500;";
          p.style =
            "padding: 10px; background-color: #9FE86C; margin-top: 25px; margin-bottom: 10px; word-wrap : break-word;";
          div.appendChild(p1);
          div.appendChild(p);

          toUser.appendChild(div);
          toUser.scrollTop = toUser.scrollHeight;
        }
      }
    },
    //获得历史消息
    getMessage() {
      getMessage("/ws/getMessage").then(res => {
        if (res.code === 200) {
          this.dialogFormVisible = true;
          this.tableData = res.data;
        } else if (res.code === 500) {
          this.$message(res.data);
        }
      });
    }
  },
  beforeRouteEnter(to, from, next) {
    document
      .querySelector("body")
      .setAttribute("style", "background-color: #F9F9F9");
    next();
  },
  beforeRouteLeave(to, from, next) {
    // 去除背景色
    document.querySelector("body").setAttribute("style", "");
    next();
  }
};
</script>

<style scoped>
.limitTitleDirectory {
  width: 120px; /* 限制文本宽度 */
  overflow: hidden; /* 超出的文本隐藏 */
  text-overflow: ellipsis; /* 溢出的文本内容用 ... 代替 */
  white-space: nowrap; /* 溢出不换行*/
}
element.style {
  padding-left: 10px;
}
.el-menu-item {
  font-size: 14px;
  color: #303133;
  padding: 0 10px;
  cursor: pointer;
  -webkit-transition: border-color 0.3s, background-color 0.3s, color 0.3s;
  transition: border-color 0.3s, background-color 0.3s, color 0.3s;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
  width: 5px; /*滚动条宽度*/
  height: 5px; /*滚动条高度*/
}

/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
  /*-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);*/
  border-radius: 10px; /*滚动条的背景区域的圆角*/
  /*background-color: red;!*滚动条的背景颜色*!*/
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
  border-radius: 10px; /*滚动条的圆角*/
  /*-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);*/
  background-color: #b8b8bc; /*滚动条的背景颜色*/
}
.el-col-md-14 {
  width: 80%;
}
.el-scrollbar {
  height: 100%;
}
</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
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369

实现效果

源码地址：

https://gitee.com/Marlon_Brando
1