uniapp에서 세션을 구현하는 방법

모바일 인터넷 산업의 급속한 발전과 함께 채팅 기능은 많은 앱의 정규 기능 중 하나가 되었으며, 대화는 채팅의 기본이 됩니다. 최근 uniapp 기술을 배우면서 uniapp이 세션 기능을 쉽게 구현할 수 있는 풍부한 API도 제공한다는 것을 알게 되었습니다. 여기서는 저자의 학습 경험을 결합하여 유니앱이 대화를 구현하는 방법을 공유하겠습니다.

1. 기본 개념

대화 기능 구현을 시작하기 전에, 대화의 기본 개념을 알아봅시다. 세션은 처음부터 끝까지 세션 개체 간의 일련의 상호 작용입니다. 채팅 애플리케이션에서 대화 개체에는 일반적으로 두 명 이상의 사람 간의 채팅 기록이 시간순으로 정렬되어 포함됩니다.

2. 프로젝트 구축

이 글에서는 uniapp 프레임워크와 uniCloud 환경을 예로 들어 세션 구현 과정을 소개하겠습니다. 먼저 uniapp 프로젝트를 빌드해야 합니다. 구체적인 단계는 다음과 같습니다.

1. HBuilderX에서 새로운 uniapp 프로젝트를 생성하고 서버 환경으로 uniCloud를 선택합니다.
2. manifest.json 파일에서 네트워크 요청 권한, 탐색 표시줄 스타일 등을 구성합니다.
3. 페이지 폴더에 채팅 관련 페이지와 구성 요소를 저장할 새 채팅 폴더를 만듭니다.

3. 기능 구현

1. 로그인 인증

세션 기능을 구현하기 전에 먼저 로그인 인증 작업을 수행해야 합니다. uniCloud는 계정과 비밀번호로 로그인하는 방법과 WeChat 로그인 두 가지 방법을 제공합니다. 로그인 페이지에서 해당 항목을 선택하고 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를 호출하여 채팅 목록 데이터를 얻을 수 있습니다. chat 폴더에 새로운 chatlist.vue 파일을 생성하여 사용자의 채팅 목록을 표시하세요. 채팅 목록을 렌더링하려면 uni-list 구성 요소를 사용하세요.

3. 채팅 페이지 구현

채팅 목록에서 채팅 기록을 클릭하면 채팅 페이지에 들어가 채팅 내용이 표시되도록 해야 합니다. chat 폴더에서 채팅 상호작용 기능을 구현하기 위해 새로운 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에서 세션을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!