Comment implémenter une session dans Uniapp

Avec le développement rapide de l'industrie de l'Internet mobile, la fonction de chat est devenue l'une des fonctions habituelles de nombreuses applications, et la conversation est la base du chat. Lorsque j'apprenais récemment la technologie Uniapp, j'ai découvert qu'Uniapp fournit également une API riche qui peut facilement implémenter des fonctions de session. Ici, en combinaison avec l'expérience d'apprentissage de l'auteur, je partagerai comment uniapp implémente la conversation.

1. Concepts de base

Avant de commencer à implémenter la fonction de conversation, comprenons les concepts de base de la conversation. Une session est une série de processus interactifs entre un objet de session du début à la fin. Dans les applications de chat, un objet de conversation comprend généralement des enregistrements de discussion entre deux ou plusieurs personnes, classés par ordre chronologique.

2. Construction du projet

Cet article utilisera le framework uniapp et l'environnement uniCloud comme exemple pour présenter le processus de mise en œuvre de la session. Tout d’abord, nous devons créer un projet Uniapp. Les étapes spécifiques sont les suivantes :

1. Créez un nouveau projet uniapp dans HBuilderX et sélectionnez uniCloud comme environnement serveur.
2. Dans le fichier manifest.json, configurez les autorisations de requête réseau, le style de la barre de navigation, etc.
3. Dans le dossier des pages, créez un nouveau dossier de discussion pour stocker les pages et les composants liés au chat.

3. Implémentation de la fonction

1. Authentification de connexion

Avant d'implémenter la fonction de session, nous devons d'abord effectuer l'opération d'authentification de connexion. UniCloud propose deux méthodes de connexion avec compte et mot de passe et connexion WeChat. Nous pouvons effectuer les sélections correspondantes sur la page de connexion et appeler l'API d'UniCloud pour terminer l'opération de connexion. Après une connexion réussie, les informations du membre seront stockées localement ou dans UniCloud.

2. Obtenir la liste de discussion

Obtenir la liste de discussion est une étape importante pour mettre en œuvre la fonction de conversation. Dans cet article, nous utiliserons les fonctions cloud fournies par UniCloud pour l'implémenter. Tout d'abord, créez une nouvelle fonction cloud sur la plateforme UniCloud et nommez-la « getChatList ». Dans la fonction cloud, nous pouvons interroger les informations de la liste de discussion de l'utilisateur et renvoyer les données au format JSON au front-end.

Exemple de code de fonction Cloud :

'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
};

Dans la page frontale, nous pouvons appeler l'API de la fonction cloud d'UniCloud pour obtenir les données de la liste de discussion. Dans le dossier de discussion, créez un nouveau fichier chatlist.vue pour afficher la liste de discussion de l'utilisateur. Utilisez le composant uni-list pour afficher la liste de discussion.

3. Mise en œuvre de la page de chat

Lorsque nous cliquons sur un enregistrement de chat dans la liste de chat, nous devons accéder à la page de chat et afficher le contenu du chat. Dans le dossier de discussion, nous créons un nouveau fichier chat.vue pour implémenter la fonction d'interaction par chat. Les étapes spécifiques de mise en œuvre sont les suivantes :

(1) En transmettant les informations utilisateur et les informations sur l'objet de discussion, appelez la fonction cloud pour obtenir l'enregistrement de discussion et l'afficher.

(2) Utilisez le composant uni-input pour implémenter la zone de saisie du message.

(3) Utilisez le composant uni-list et le composant uni-message pour implémenter l'affichage de la liste de messages.

(4) Implémentez la fonction d'envoi de messages en appelant les fonctions cloud et affichez le message dans la page de discussion en temps réel.

Exemple de code de page de discussion :

<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. Résumé

Grâce à l'introduction de cet article, nous comprenons comment uniapp implémente la fonction de session et montre le code spécifique pour implémenter la page de discussion. Au cours du processus de développement proprement dit, nous pouvons également étendre et optimiser ces fonctions en fonction de nos propres besoins. J'espère que cela pourra être utile à tout le monde dans le développement d'Uniapp.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!