uniappでセッションを実装する方法

モバイル インターネット業界の急速な発展に伴い、チャット機能は多くの APP の標準機能の 1 つとなり、会話はチャットの基礎です。最近 uniapp テクノロジーを学習しているときに、uniapp がセッション関数を簡単に実装できる豊富な API も提供していることを知りました。ここでは、著者の学習経験と組み合わせて、uniapp が会話を実装する方法を共有します。

1. 基本概念

セッション機能の実装を始める前に、セッションの基本概念を理解しましょう。セッションは、セッション オブジェクト間の最初から最後までの一連の対話型プロセスです。チャット アプリケーションでは、通常、会話オブジェクトには、時系列に並べられた 2 人以上の人々の間のチャット記録が含まれます。

2. プロジェクトの構築

この記事では、uniapp フレームワークと uniCloud 環境を例として、セッションの実装プロセスを紹介します。まず、uniapp プロジェクトを構築する必要があります。具体的な手順は次のとおりです。

1. HBuilderX で新しい uniapp プロジェクトを作成し、サーバー環境として uniCloud を選択します。
2. manifest.json ファイルで、ネットワーク リクエストのアクセス許可とナビゲーション バーのスタイルを構成します。
3. ページ フォルダーに、チャット関連のページとコンポーネントを保存するための新しいチャット フォルダーを作成します。

3. 関数の実装

1. ログイン認証

セッション関数を実装する前に、まずログイン認証操作を実行する必要があります。 uniCloud では、アカウントとパスワードを使用したログインと WeChat ログインの 2 つの方法が提供されます。ログイン ページで対応する選択を行い、uniCloud の API を呼び出してログイン操作を完了します。ログインに成功すると、メンバー情報はローカルまたは uniCloud に保存されます。

2. チャット リストの取得

チャット リストの取得は、会話機能を実装するための重要な手順です。今回はuniCloudが提供するクラウド機能を利用して実装していきます。まず、uniCloud プラットフォームに新しいクラウド関数を作成し、「getChatList」という名前を付けます。クラウド機能では、ユーザーのチャットリスト情報をクエリし、JSON形式でデータをフロントエンドに返すことができます。

クラウド関数のコード例:

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

フロントエンド ページで、uniCloud のクラウド関数 API を呼び出してチャット リスト データを取得できます。チャット フォルダーに、ユーザーのチャット リストを表示するための新しい chatlist.vue ファイルを作成します。 uni-list コンポーネントを使用してチャット リストをレンダリングします。

3. チャット ページの実装

チャット リスト内のチャット レコードをクリックすると、チャット ページに入り、チャットの内容を表示する必要があります。チャット フォルダー内に、チャット インタラクション機能を実装するための新しい chat.vue ファイルを作成します。具体的な実装手順は以下のとおりです。

(1) ユーザー情報とチャットオブジェクト情報を渡してクラウド関数を呼び出し、チャット記録を取得して表示します。

(2) uni-input コンポーネントを使用してメッセージ入力ボックスを実装します。

(3) uni-listコンポーネントとuni-messageコンポーネントを使用してメッセージ一覧表示を実現します。

(4) クラウド関数を呼び出してメッセージ送信機能を実装し、リアルタイムにチャットページにメッセージを表示します。

チャット ページのコード例:

<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. 概要

この記事の導入を通じて、uniapp がセッション関数を実装する方法を理解し、セッション関数を実装するための特定のコードを示します。チャットページ。実際の開発プロセスでは、必要に応じてこれらの機能を拡張および最適化することもできます。 uniapp開発の皆様のお役に立てれば幸いです。

以上がuniappでセッションを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。