vue3+nodeJs+webSocket实现聊天功能

利用websocket 来实现聊天功能，紧张是通过以下几点来实现的
一、利用nodejs来实现后端接口
     1、起首举行初始化
        

1.   const { WebSocketServer } = require("ws"); //  引入WebSocketServer模块
2.   const Websocket = require("ws");
3.   const WebSocket = require("ws"); //  引入WebSocket模块
5.   const onLineList = []; //  定义一个在线用户列表
7. // 我们的port是8090
8.   const wss = new WebSocket.Server({ port: 8080 });
10. // 如果有ws就代表初始化成功
11.   if (wss) {
12.     console.log("ws初始化成功");

复制代码

2、举行连接 --- 设置进入的欢迎语
  

1. const user = new URL(request.url, `http://${request.headers.host}`).searchParams.get('user');
2.     console.log(`${user} 已连接`);
3.     let welCome = JSON.stringify({
4.       type: "tips",
5.       content: "欢迎加入聊天室，现在我们开始畅聊吧"
6.     });
8.     ws.send(welCome, { binary: false });

复制代码

 2）举行注册消息的变乱
      

1. ws.on("message", async function message(data) {
2.       const message = JSON.parse(data); //  将收到的数据解析为JSON格式
3.       switch (
4.         message.type //  根据消息类型进行不同的处理
5.         ) {
6.         case "init":
7.           if (message.userId) {
8.             //  如果消息中包含用户id
9.             // 为当前的用户  ws链接绑定 用户id，用于用户断开连接时，改变用户状态
10.             ws.userId = message.userId;
11.             // 上线
12.             keepLatestOnlineList("onLine", message);
13.           }
14.           break;
15.         case "message":
16.           wss.clients.forEach(client => {
17.             //  遍历所有客户端
18.             if (!message.timestamp) {
19.               message.timestamp = new Date().toISOString();
20.             }
21.             if (client.readyState === Websocket.OPEN) {
22.               //  如果客户端处于打开状态
23.               client.send(JSON.stringify(message), { binary: false }); //  发送消息
24.             }
25.           });
26.           break;
27.         default:
28.           break;
29.       }
30.     });

复制代码

 
  3）被动断开说明用户已经脱离网站了，维护在线的列表
  

1. ws.on("close", function() {
2.       keepLatestOnlineList("close", { userId: ws.userId });
3.     });
5.   function keepLatestOnlineList(type, message) {
6.     let index = onLineList.findIndex(item => item.userId === message.userId); //  在在线列表中查找用户
7.     switch (type) {
8.       case "onLine":
9.         if (index === -1) {
10.           //  如果用户不在在线列表中，则添加用户
11.           onLineList.push({ userId: message.userId });
12.         }
13.         break;
14.       case "close":
15.         if (index !== -1) {
16.           //  如果用户在在线列表中，则删除用户
17.           onLineList.splice(index, 1);
18.           console.log("有客户被断开");
19.         }
20.         break;
21.       default:
22.         break;
23.     }
24.   }
26. }

复制代码

 
  二、 设置前端页面
1）模板部分
  

1. <template>
2.     <div class="app">
3.         <div class="chat_container">
4.             <div class="main_content_header">实时聊天</div>
5.             <div class="chat-room">
6.                 <div class="message-item" v-for="(item, index) in messageList" :key="index">
7.                     <div v-if="item.isSystem" class="system-message">
8.                         {{ formatSendTime(item.timestamp) }}
9.                     </div>
10.                     <!-- 左边通新内容 -->
11.                     <div class="flex-left" v-if="item.userId !== userInfo.userId">
12.                         <!--其他人的 头像 -->
13.                         <div class="avater">
14.                             <el-avatar src="https://picsum.photos/200/300"></el-avatar>
15.                         </div>
16.                         <div class="message-content">{{ item.content }}</div>
17.                     </div>
18.                     <div class="flex-right" v-else>
19.                         <!--自己的 头像 -->
20.                         <div class="message-content">{{ item.content }}</div>
21.                         <div class="avater">
22.                             <el-avatar>
23.                                 <img src="../../../assets/images/avater.jpg" alt="">
24.                             </el-avatar>
25.                         </div>
26.                     </div>
27.                 </div>
28.             </div>
29.             <div class="send-box">
30.                 <el-input type="text" v-model="yourMessage" />
31.                 <el-button type="primary" @click="sendMesage">发送</el-button>
32.             </div>
33.         </div>
34.     </div>
35. </template>

复制代码

  2）逻辑部分
  

1. <script setup >
2. import { onMounted, ref } from 'vue'
3. const yourMessage = ref('')
4. const messageList = ref([])
5. let ws = null
6. const userInfo = ref({
7.     userId: ""
8. })
10. const user = ref(sessionStorage.getItem('user'))
12. // 发送消息
13. function sendMesage() {
14.     const timestamp = new Date().toISOString()
15.     if (yourMessage.value) {
16.         ws.send(JSON.stringify({
17.             type: "message",
18.             isSystem: true,
19.             userId: userInfo.value.userId,
20.             content: yourMessage.value,
21.             timestamp: timestamp, // 添加时间戳
22.         })
23.         )
24.         yourMessage.value = ''
25.     }
26. }
28. const initWebSocket = () => {
29.     ws = new WebSocket(`ws://localhost:4090?user=${String(user.value)}`)
30.     ws.onopen = () => {
31.         console.log('链接成功')
32.         ws.send(JSON.stringify({
33.             type: "init",
34.             isSystem: true,
35.             userId: userInfo.value.userId,
36.             content: '欢迎来到聊天室',
37.         })
38.         )
39.     }
41.     ws.onmessage = (e) => {
42.         const message = JSON.parse(e.data)
43.         switch (message.type) { // 根据消息类型进行不同的操作
44.             case "tips":
45.                 console.log(message.content) // 如果消息类型为tips，则打印消息内容
47.             case 'message':
48.                 messageList.value.push(message) // 如果消息类型为message，则将消息添加到消息列表中
50.                 console.log(messageList.value) // 打印消息列表
51.                 break;
52.             case 'onlineList':
53.                 onlineList.value = message.onlineList // 如果消息类型为onlineList，则将在线用户列表赋值给onlineList
54.                 break;
55.         }
56.     }
57.     ws.onclose = () => {
58.         console.log('连接关闭')
59.     }
60.     ws.onerror = () => {
62.     }
63. }
65. onMounted(() => {
66.     userInfo.value.userId = new Date().getTime().toString().slice(8)
67.     initWebSocket()
68. })
69. // 时间格式化
70. const formatSendTime = (sendTime) => {
71.     const now = new Date();
72.     const sendDate = new Date(sendTime);
73.     const timeDiff = now - sendDate;
74.     const oneDay = 24 * 60 * 60 * 1000;
76.     if (timeDiff < 0) {
77.         return "Invalid time"; // 或者其他错误处理
78.     }
79.     if (timeDiff < oneDay) {
80.         return "今天" + formatTime(sendDate);
81.     }
82.     return sendDate.toLocaleDateString("zh-CN") + " " + formatTime(sendDate);
83. };
85. const formatTime = (date) => {
86.     const hours = date.getHours().toString().padStart(2, "0");
87.     const minutes = date.getMinutes().toString().padStart(2, "0");
88.     return hours + ":" + minutes;
89. };
90. </script>

复制代码

 
  3）样式部分
    

1. <style lang='less'>
2. .app {
3.     // width: 100vw;
4.     // height: 100vh;
5.     overflow: hidden;
6.     // background-color: #fff;
7.     display: grid;
8.     place-items: center;
10.     .chat_container {
11.         width: 650px;
12.         height: 650px;
13.         overflow: hidden;
14.         background-color: #fff;
15.         border-radius: 8px;
16.     }
17. }
19. .chat-room {
20.     height: calc(100% - 110px);
21.     padding: 10px;
22.     overflow: auto;
23.     background: #000;
24. }
26. .send-box {
27.     border-top: 1px solid #eee;
28.     display: flex;
29.     align-items: center;
30.     height: 60px;
32. }
34. .message-item {
35.     width: 100%;
36.     // margin: 0 auto;
37.     margin-bottom: 10px;
40.     .flex-left {
41.         display: flex;
42.         justify-content: flex-start;
44.         .avater {
45.             width: 40px;
46.             height: 40px;
47.             border-radius: 50%;
48.             overflow: hidden;
49.             display: flex;
50.             justify-content: center;
51.             align-items: center;
52.             background-color: #eee;
53.             margin-right: 10px;
55.         }
57.         .message-content {
58.             min-height: 30px;
59.             height: 40px;
60.             line-height: 40px;
61.             background: #fff;
62.             border-radius: 8px;
63.             padding: 0 10px;
64.         }
65.     }
67.     .flex-right {
68.         display: flex;
69.         justify-content: flex-end;
71.         .avater {
72.             width: 40px;
73.             height: 40px;
74.             border-radius: 50%;
75.             overflow: hidden;
76.             display: flex;
77.             justify-content: center;
78.             align-items: center;
79.             background-color: #eee;
80.             margin-left: 10px;
82.         }
84.         .message-content {
85.             min-height: 30px;
86.             height: 40px;
87.             line-height: 40px;
88.             background: #fff;
89.             border-radius: 8px;
90.             padding: 0 10px;
91.         }
92.     }
93. }
95. .main_content_header {
96.     width: 100%;
97.     height: 50px;
98.     border-radius: 5px;
99.     background-color: #7de0bd;
100.     display: flex;
101.     align-items: center;
102.     justify-content: center;
103.     font-size: 16px;
104. }
106. .system-message {
107.     font-size: 12px;
108.     color: #fff;
109.     display: flex;
110.     justify-content: center;
111.     align-items: center;
112. }
113. </style>

复制代码

完备代码
nodejs 部分
  

1. const { WebSocketServer } = require("ws"); //  引入WebSocketServer模块
2. const Websocket = require("ws");
3. const WebSocket = require("ws"); //  引入WebSocket模块
5. //定义一个在线列表
7. const onLineList = []
9. //设置端口号
10. const wss = new WebSocket.Server({ port: 4090 });
12. // 如果ws就代表初始化成功
14. if(wss){
15.   console.log('WebSocket初始化成功')
16. }
18. // 进行连接
20. wss.on("connection", function connection(ws, request) {
21. //   获取对应的用户名，来进行展示连接
22.   const user = new URL(request.url, `http://${request.headers.host}`).searchParams.get('user');
23.   console.log(`${user} 已连接`)
25. //   设置欢迎语
26.   let welCome = JSON.stringify({
27.     type: "tips",
28.     content:"欢迎回来~"
29.   })
31.   ws.send(welCome, { binary: false });
33.   ws.on("error", (error) => {
34.     console.log("WebSocket error:", error);
35.   })
37.    //注册收到消息的事件
39.   ws.on("message", async function message(data) {
40.     const message = JSON.parse(data);
41.     switch (message.type) {
42.       case "init":
43.         if (message.userId) {
44.           ws.userId = message.userId;
45.           keepLatestOnlineList('online',message)
46.         }
47.         break;
48.       case "message":
49.         wss.clients.forEach(client => {
50.         //   遍历所有的客户端
51.           if(!message.timestamp) {
52.             message.timestamp = new Date().toISOString();
53.           }
54.           if (client.readyState === Websocket.OPEN) {
55.             //  如果客户端处于打开状态
56.             client.send(JSON.stringify(message), { binary: false }); //  发送消息
57.           }
58.         })
59.         break;
60.         default:
61.           break;
62.     }
63.   })
64.   ws.on("close", function() {
65.     keepLatestOnlineList("close", { userId: ws.userId });
66.   });
67. })
69. function keepLatestOnlineList(type, message) {
70.   let index = onLineList.findIndex(item => item.userId === message.userId); //  在在线列表中查找用户
71.   switch (type) {
72.     case "onLine":
73.       if (index === -1) {
74.         //  如果用户不在在线列表中，则添加用户
75.         onLineList.push({ userId: message.userId });
76.       }
77.       break;
78.     case "close":
79.       if (index !== -1) {
80.         //  如果用户在在线列表中，则删除用户
81.         onLineList.splice(index, 1);
82.         console.log("有客户被断开");
83.       }
84.       break;
85.     default:
86.       break;
87.   }
88. }

复制代码

  完成之后的样式如下

 喜欢点个关注吧~

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。