当前位置：首页 > wzjs >正文

代做设计网站百度推广培训班

wzjs 2025/8/26 10:38:44

代做设计网站,百度推广培训班,子网站怎么做,做网站360好还是百度好使用websocket 来实现聊天功能，主要是通过以下几点来实现的一、使用nodejs来实现后端接口 1、首先进行初始化 const { WebSocketServer } require("ws"); // 引入WebSocketServer模块const Websocket require("ws");const WebSocket requ…

使用websocket 来实现聊天功能，主要是通过以下几点来实现的

一、使用nodejs来实现后端接口

1、首先进行初始化

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

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

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

2）进行注册消息的事件

 ws.on("message", async function message(data) {const message = JSON.parse(data); //  将收到的数据解析为JSON格式switch (message.type //  根据消息类型进行不同的处理) {case "init":if (message.userId) {//  如果消息中包含用户id// 为当前的用户  ws链接绑定 用户id，用于用户断开连接时，改变用户状态ws.userId = message.userId;// 上线keepLatestOnlineList("onLine", message);}break;case "message":wss.clients.forEach(client => {//  遍历所有客户端if (!message.timestamp) {message.timestamp = new Date().toISOString();}if (client.readyState === Websocket.OPEN) {//  如果客户端处于打开状态client.send(JSON.stringify(message), { binary: false }); //  发送消息}});break;default:break;}});

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

 ws.on("close", function() {keepLatestOnlineList("close", { userId: ws.userId });});function keepLatestOnlineList(type, message) {let index = onLineList.findIndex(item => item.userId === message.userId); //  在在线列表中查找用户switch (type) {case "onLine":if (index === -1) {//  如果用户不在在线列表中，则添加用户onLineList.push({ userId: message.userId });}break;case "close":if (index !== -1) {//  如果用户在在线列表中，则删除用户onLineList.splice(index, 1);console.log("有客户被断开");}break;default:break;}}}

二、设置前端页面

1）模板部分

<template><div class="app"><div class="chat_container"><div class="main_content_header">实时聊天</div><div class="chat-room"><div class="message-item" v-for="(item, index) in messageList" :key="index"><div v-if="item.isSystem" class="system-message">{{ formatSendTime(item.timestamp) }}</div><!-- 左边通新内容 --><div class="flex-left" v-if="item.userId !== userInfo.userId"><!--其他人的 头像 --><div class="avater"><el-avatar src="https://picsum.photos/200/300"></el-avatar></div><div class="message-content">{{ item.content }}</div></div><div class="flex-right" v-else><!--自己的 头像 --><div class="message-content">{{ item.content }}</div><div class="avater"><el-avatar><img src="../../../assets/images/avater.jpg" alt=""></el-avatar></div></div></div></div><div class="send-box"><el-input type="text" v-model="yourMessage" /><el-button type="primary" @click="sendMesage">发送</el-button></div></div></div>
</template>

2）逻辑部分

<script setup >
import { onMounted, ref } from 'vue'
const yourMessage = ref('')
const messageList = ref([])
let ws = null
const userInfo = ref({userId: ""
})const user = ref(sessionStorage.getItem('user'))// 发送消息
function sendMesage() {const timestamp = new Date().toISOString()if (yourMessage.value) {ws.send(JSON.stringify({type: "message",isSystem: true,userId: userInfo.value.userId,content: yourMessage.value,timestamp: timestamp, // 添加时间戳}))yourMessage.value = ''}
}const initWebSocket = () => {ws = new WebSocket(`ws://localhost:4090?user=${String(user.value)}`)ws.onopen = () => {console.log('链接成功')ws.send(JSON.stringify({type: "init",isSystem: true,userId: userInfo.value.userId,content: '欢迎来到聊天室',}))}ws.onmessage = (e) => {const message = JSON.parse(e.data)switch (message.type) { // 根据消息类型进行不同的操作case "tips":console.log(message.content) // 如果消息类型为tips，则打印消息内容case 'message':messageList.value.push(message) // 如果消息类型为message，则将消息添加到消息列表中console.log(messageList.value) // 打印消息列表break;case 'onlineList':onlineList.value = message.onlineList // 如果消息类型为onlineList，则将在线用户列表赋值给onlineListbreak;}}ws.onclose = () => {console.log('连接关闭')}ws.onerror = () => {}
}onMounted(() => {userInfo.value.userId = new Date().getTime().toString().slice(8)initWebSocket()
})
// 时间格式化
const formatSendTime = (sendTime) => {const now = new Date();const sendDate = new Date(sendTime);const timeDiff = now - sendDate;const oneDay = 24 * 60 * 60 * 1000;if (timeDiff < 0) {return "Invalid time"; // 或者其他错误处理}if (timeDiff < oneDay) {return "今天" + formatTime(sendDate);}return sendDate.toLocaleDateString("zh-CN") + " " + formatTime(sendDate);
};const formatTime = (date) => {const hours = date.getHours().toString().padStart(2, "0");const minutes = date.getMinutes().toString().padStart(2, "0");return hours + ":" + minutes;
};
</script>

3）样式部分

<style lang='less'>
.app {// width: 100vw;// height: 100vh;overflow: hidden;// background-color: #fff;display: grid;place-items: center;.chat_container {width: 650px;height: 650px;overflow: hidden;background-color: #fff;border-radius: 8px;}
}.chat-room {height: calc(100% - 110px);padding: 10px;overflow: auto;background: #000;
}.send-box {border-top: 1px solid #eee;display: flex;align-items: center;height: 60px;}.message-item {width: 100%;// margin: 0 auto;margin-bottom: 10px;.flex-left {display: flex;justify-content: flex-start;.avater {width: 40px;height: 40px;border-radius: 50%;overflow: hidden;display: flex;justify-content: center;align-items: center;background-color: #eee;margin-right: 10px;}.message-content {min-height: 30px;height: 40px;line-height: 40px;background: #fff;border-radius: 8px;padding: 0 10px;}}.flex-right {display: flex;justify-content: flex-end;.avater {width: 40px;height: 40px;border-radius: 50%;overflow: hidden;display: flex;justify-content: center;align-items: center;background-color: #eee;margin-left: 10px;}.message-content {min-height: 30px;height: 40px;line-height: 40px;background: #fff;border-radius: 8px;padding: 0 10px;}}
}.main_content_header {width: 100%;height: 50px;border-radius: 5px;background-color: #7de0bd;display: flex;align-items: center;justify-content: center;font-size: 16px;
}.system-message {font-size: 12px;color: #fff;display: flex;justify-content: center;align-items: center;
}
</style>

完整代码

nodejs 部分

const { WebSocketServer } = require("ws"); //  引入WebSocketServer模块
const Websocket = require("ws");
const WebSocket = require("ws"); //  引入WebSocket模块//定义一个在线列表const onLineList = []//设置端口号
const wss = new WebSocket.Server({ port: 4090 });// 如果ws就代表初始化成功if(wss){console.log('WebSocket初始化成功')
}// 进行连接wss.on("connection", function connection(ws, request) {
//   获取对应的用户名，来进行展示连接const user = new URL(request.url, `http://${request.headers.host}`).searchParams.get('user');console.log(`${user} 已连接`)//   设置欢迎语let welCome = JSON.stringify({type: "tips",content:"欢迎回来~"})ws.send(welCome, { binary: false });ws.on("error", (error) => {console.log("WebSocket error:", error);})//注册收到消息的事件ws.on("message", async function message(data) {const message = JSON.parse(data);switch (message.type) {case "init":if (message.userId) {ws.userId = message.userId;keepLatestOnlineList('online',message)}break;case "message":wss.clients.forEach(client => {//   遍历所有的客户端if(!message.timestamp) {message.timestamp = new Date().toISOString();}if (client.readyState === Websocket.OPEN) {//  如果客户端处于打开状态client.send(JSON.stringify(message), { binary: false }); //  发送消息}})break;default:break;}})ws.on("close", function() {keepLatestOnlineList("close", { userId: ws.userId });});
})function keepLatestOnlineList(type, message) {let index = onLineList.findIndex(item => item.userId === message.userId); //  在在线列表中查找用户switch (type) {case "onLine":if (index === -1) {//  如果用户不在在线列表中，则添加用户onLineList.push({ userId: message.userId });}break;case "close":if (index !== -1) {//  如果用户在在线列表中，则删除用户onLineList.splice(index, 1);console.log("有客户被断开");}break;default:break;}
}

完成之后的样式如下

喜欢点个关注吧~