How to implement session in uniapp

With the rapid development of the mobile Internet industry, the chat function has become one of the regular functions of many APPs, and conversation is the basis for chat. When I was learning uniapp technology recently, I found that uniapp also provides a rich API that can easily implement session functions. Here, combined with the author's learning experience, I will share how uniapp implements conversation.

1. Basic concepts

Before we start to implement the session function, let’s understand the basic concepts of session. A session is a series of interactive processes between a session object from the beginning to the end. In chat applications, a conversation object usually includes chat records between two or more people, arranged in chronological order.

2. Project Construction

This article will use the uniapp framework and the uniCloud environment as an example to introduce the session implementation process. First, we need to build a uniapp project. The specific steps are as follows:

1. Create a new uniapp project in HBuilderX and select uniCloud as the server environment.
2. In the manifest.json file, configure the network request permissions and navigation bar style.
3. In the pages folder, create a new chat folder to store chat-related pages and components.

3. Function implementation

1. Login authentication

Before implementing the session function, we need to perform the login authentication operation first. uniCloud provides two methods of login with account and password and WeChat login. We can make corresponding selections on the login page and call uniCloud's API to complete the login operation. After successful login, the member information will be stored locally or in uniCloud.

2. Get the chat list

Getting the chat list is an important step to implement the conversation function. In this article, we will use the cloud functions provided by uniCloud to implement it. First, create a new cloud function in the uniCloud platform and name it "getChatList". In the cloud function, we can query the user's chat list information and return data in JSON format to the front end.

Cloud function code example:

'use strict';
const db = uniCloud.database()
exports.main = async (event, context) => {
  const collection = db.collection('chatList')
  const res = await collection.where({
    openid: event.openid
  }).get()
  return res.data
};

In the front-end page, we can call uniCloud's cloud function API to obtain chat list data. In the chat folder, create a new chatlist.vue file to display the user's chat list. Use the uni-list component to render the chat list.

3. Implementing the chat page

When clicking on a chat record in the chat list, we need to enter the chat page and display the chat content. In the chat folder, we create a new chat.vue file to implement the chat interaction function. The specific implementation steps are as follows:

(1) By passing in user information and chat object information, call the cloud function to obtain the chat record and display it.

(2) Use the uni-input component to implement the message input box.

(3) Use uni-list component and uni-message component to realize message list display.

(4) Implement the message sending function by calling cloud functions, and display the message in the chat page in real time.

Chat page code example:

<template>
  <view class="chat-page">
    <view class="chat-messages">
      <view v-for="(message,index) in messages" :key="index" :class="[&#39;chat-message&#39;,userOpenid===message.openid?&#39;right&#39;:&#39;left&#39;]">
        <view v-if="userOpenid!==message.openid" class="avatar">
          <image class="avatar-img" :src="friendInfo.avatarUrl"></image>
        </view>
        <view class="message-info">
          <view class="message-content">
            <template v-if="message.type===&#39;text&#39;">{{message.content}}</template>
          </view>
        </view>
        <view v-if="userOpenid===message.openid" class="avatar">
          <image class="avatar-img" :src="userInfo.avatarUrl"></image>
        </view>
      </view>
    </view>
    <view class="chat-input">
      <uni-input type="text" v-model="inputContent" @confirm="sendMessage" placeholder="请输入"/> 
    </view>
  </view>
</template>
<script>
import { uniCloud } from 'wx-resource'
import { mapState } from 'vuex'
import socket from '@/utils/socket.js'
export default {
  data() {
    return {
      messages: [],
      inputContent: ''
    }
  },
  computed: {
    ...mapState(['userInfo','friendInfo'])
  },
  onLoad() {
    this.getChatList()
  },
  methods: {
    async getChatList() {
      const res = await uniCloud.callFunction({
        name: 'getChatList',
        data: {
          openid: this.userInfo.openid,
          friendOpenid: this.friendInfo.openid
        }
      })
      this.messages = res.result
    },
    async sendMessage() {
      if (this.inputContent === '') {
        return
      }
      socket.emit('chat message', {
        openid: this.userInfo.openid,
        friendOpenid: this.friendInfo.openid,
        content: this.inputContent.trim(),
        type: 'text'
      })
      this.inputContent = ''
    }
  },
  created() {
    socket.on('chat message', message => {
      this.messages.push(message)
    })
  }
}
</script>

<style>
.chat-page {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.chat-messages {
  flex: 1;
  overflow-y: scroll;
}
.chat-message {
  display: flex;
  margin: 10px;
  max-width: 60%;
}
.chat-message .avatar {
  margin-right: 10px;
}
.chat-message .message-info {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  flex-grow: 1;
  max-width: 80%;
}
.chat-message.right .message-info {
  align-items: flex-end;
}
.chat-message .avatar-img {
  display: block;
  border-radius: 50%;
  width: 40px;
  height: 40px;
}
.message-content {
  word-wrap: break-word;
  white-space: pre-wrap;
  background-color: #eee;
  padding: 7px;
  border-radius: 10px;
}
.chat-input {
  padding: 10px;
  background: #fff;
}
</style>

IV. Summary

Through the introduction of this article, we understand how uniapp implements the session function and shows the specific code to implement the chat page . During the actual development process, we can also expand and optimize these functions according to our own needs. I hope it can be helpful to everyone in uniapp development.

The above is the detailed content of How to implement session in uniapp. For more information, please follow other related articles on the PHP Chinese website!