使用Taro小程序框架开发一个学习、刷题、论坛、聊天交流的微信小程序

router.get('/chatlog/:to', async (ctx) => { 

const to = ctx.params.to
const response = []
const res = await query(`SELECT * FROM chatlog WHERE room_name = '${ 
to}' ORDER BY current_time DESC`);
res.map((item, index) => { 

const { 
 room_name, user_name, user_avatar, current_time, message } = item
response[index] = { 

to: room_name,
userName: user_name,
userAvatar: user_avatar,
currentTime: formatTime(current_time),
message,
messageId: `msg${ 
current_time}${ 
Math.ceil(Math.random() * 100)}`
}
})
ctx.response.body = parse(response)
})

let onlineUserSocket = { 
}
let onlineUserInfo = { 
}
const handleLogin = (ws, socketMessage) => { 

const { 
 socketId, userName, userAvatar } = socketMessage
onlineUserSocket[socketId] = ws
onlineUserInfo[socketId] = { 
 userName, userAvatar }
ws.socketId = socketId
}
// 广播消息
const broadcast = (message) => { 

const { 
 from, userName } = message
Object.values(onlineUserSocket).forEach((socket) => { 

socket.send(JSON.stringify({ 

...message,
isMyself: userName === onlineUserInfo[socket.socketId].userName
}))
})
}

handleSocketMessage(): void { 

const { 
 socketTask } = this
socketTask.onMessage(async ({ 
 data }) => { 

const messageInfo: ReceiveMessageInfo = JSON.parse(data)
const { 
 to, messageId, isMyself, userName, userAvatar, currentTime, message } = messageInfo
const time: string = formatTime(currentTime)
this.messageList[to].push({ 

...messageInfo,
currentTime: time
})
/* 设置群组最新消息 */
this.contactsList.filter(contacts => contacts.contactsId === to)[0].latestMessage = { 

userName, message, currentTime: time
}
this.scrollViewId = isMyself ? messageId : ''
await Taro.request({ 

url: 'http://localhost:3000/chatlog',
method: 'PUT',
data: { 

to,
userName,
userAvatar,
currentTime,
message,
}
})
})
}

// 这里是覆盖默认样式，显示自己消息的样式
.myself {
justify-content: flex-end;
.avatar {
order: 1;
}
.info {
display: flex;
flex-direction: column;
align-items: flex-end;
.header {
justify-content: flex-end;
.username {
order: 1;
margin-right: 0 !important;
margin-left: .5em;
}
}
.content {
color: #333 !important;
border: #e7e7e7 1px solid;
background: #fff !important;
box-shadow: 0 8px 20px -8px #d7d7d7;
}
}
}
// 以下是默认样式，就是左边的样式
.message-wrap {
display: flex;
margin: 20px 0;
.avatar {
width: 14vw;
height: 14vw;
margin: 10px;
border-radius: 50%;
background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
}
.info {
.header {
display: flex;
align-items: center;
max-width: 40vw;
padding: 10px 0;
color: #666;
font-size: .8em;
.username {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 40vw;
margin-right: .5em;
color: #555;
font-size: 1.2em;
font-weight: bold;
}
}
.content {
display: inline-block;
max-width: 60vw;
padding: 10px 20px;
color: #fff;
word-break: break-all;
border-radius: 20px;
background: #66a6ff;
}
}
}

  handleSocketClose(): void { 

const { 
 socketTask } = this
socketTask.onClose((msg) => { 

this.socketTask = null
this.socketReconnect()
console.log('onClose: ', msg)
})
}
handleSocketError(): void { 

const { 
 socketTask } = this
socketTask.onError(() => { 

this.socketTask = null
this.socketReconnect()
console.log('Error!')
})
}

  socketConnect() { 

// 生成随机特有的socketId
this.generateSocketId()
/* 使用then的方法才能正确触发onOpen的方法，暂时不知道原因 */
Taro.connectSocket({ 

url: 'ws://localhost:3000',
}).then(task => { 

this.socketTask = task
this.handleSocketOpen()
this.handleSocketMessage()
this.handleSocketClose()
this.handleSocketError()
})
}
socketReconnect(): void { 

this.isReconnected = true
clearTimeout(this.timer)
/* 3s延迟重连，减轻压力 */
this.timer = setTimeout(() => { 

this.socketConnect()
}, 3000)
}

<View className={`chat-input-container ${emojiOpened ? 'emoji-open' : ''}`}>

.emoji-open {
transform: translateY(-30vh);
transition: all .2s ease;
}
...
&-input-container {
position: fixed;
left: 0;
bottom: -30vh;
width: 100vw;
height: 40vh;
background: #fff;
z-index: 1;
transition: all .2s ease;
...
}