나의 첫 번째 블로그인 소프로그램 클라우드 개발은 서버가 없는 실시간 통신을 실현한다

소규모 프로그램 클라우드 개발 초기 체험

실시간 변화 인터페이스의 함수 setInterval()

주의해야 할 점

내 코드

마지막에 쓰세요

소프로그램 클라우드 개발 초기 체험

저는 이번 학기 소프트웨어 공학 수업에서 처음으로 위챗 애플릿의 클라우드 개발 기능을 접했습니다. 클라우드 개발 모델은 일부 네트워크 기능을 실현할 수 있습니다. 텐센트 아버지는 개발자에게 클라우드 저장 공간, 클라우드 데이터베이스를 제공하고 개발자는 스스로 클라우드 함수를 써서 업로드할 수 있습니다.우리의 본뜻은 중고 거래 플랫폼을 개발하는 것이다. 이 플랫폼은 채팅 시스템이 필요하지만 프로젝트가 너무 위탁되어 마지막까지 서버를 설치하지 않아 어쩔 수 없이 이 기능을 취소할 준비를 한다.그러나 작은 프로그램을 배울 때 처음으로 뱀을 탐식한다고 쓴 것을 감안하여 뱀을 탐식하는 코드에서 영감을 찾았다.

실시간 변화 인터페이스의 함수 setInterval()

둘째 개로서 전에는 C와 자바만 배웠고 숙제하는 과정에서 소량의 js와 C#만 사용했기 때문에 깊이 이해하지 못했다.이 덩어리에 잘못이 있으면 선배들이 비판하고 바로잡아 주십시오.우리가 실시간 채팅을 실현하려면 반드시 실시간 업데이트 인터페이스가 없어서는 안 된다. 웹 페이지의 탐식뱀이든 위챗 소프로그램판의 탐식뱀이든 모두 하나의 타이머가 필요하다. 여기서 js의 setInterval() 함수를 선택한다. 이것은 하나의 타이머이고 두 개의 참수가 있다. 첫 번째 파라미터는 하나의 함수이고 두 번째 파라미터는 시간을 대표한다. 예를 들어 vart=setInterval(f(), 3000), 즉 3초마다 f()를 실행한다.t는 이 타이머를 대표하여 사용하지 않을 때 끄고 (예를 들어 채팅 페이지에서 로그아웃한 후) 너무 많은 자원 소모를 피할 수 있다.위챗 소프로그램 클라우드 개발을 진행한 사람들은 클라우드 개발이 제공하는 API는 하나의 함수로 데이터베이스에 직접 접근할 수 있다는 것을 알고 있다. 우리는 이런 API와 타이머를 결합하면 데이터베이스 내 메시지 업데이트에 대한 수요를 실시간으로 얻을 수 있고 최신 데이터베이스 정보로 페이지 데이터를 갱신하면 실시간 통신을 실현할 수 있다.이것은 마치 상고시대로 돌아가 일정 시간마다 서버에 한 번씩 요청을 보내는 메커니즘으로 돌아가는 것 같지만, 이것은 확실히 효과적이다. 만약에 시간을 절약하고 핵심 수요에 영향을 주지 않는다면 이런 형식으로 채팅방을 실현할 수 있다.이런 방법은 자원의 과다 소모를 피하기 위해 반드시 시간이 지연될 것이다. 이 시간의 대부분은 우리가 타이머에서 설정한 시간에 달려 있다. 시간이 길어질수록 자원 소모가 적지만 사용자의 체험도 나빠진다.이런 실시간 통신은 규모가 비교적 작은 경량급 소규모 프로그램에만 적용된다.

주의할 점

개인적으로는 채팅 페이지에서만 타이머를 호출하면 된다고 생각하는데, onHide () 때 타이머가 꺼집니다.만약 당신이 모든 채팅 기록을 보존하고 싶다면 클라우드 함수를 직접 써야 합니다. 위챗 프로그램의 클라우드 개발은 데이터베이스 호출에 이런 제한이 있기 때문입니다. 로컬에서 검색을 호출할 때 데이터베이스는 한 번에 최대 20개의 결과만 되돌릴 수 있습니다. 클라우드 함수를 사용하면 한 번에 100개, 100개가 당신의 요구를 충족시키지 못하면당신은 프로미스를 나누어 추출한 후에 수동으로 정렬할 수 있습니다. (여기는 사용하지 않았지만 위챗 프로그램의 공식 문서에 이렇게 쓰여 있습니다.)환경 자원 상한선을 신청하지 않은 개발자는 한 달에 20만 번의 클라우드 함수를 호출할 수 있다. 이것은 상당히 제한된 것이기 때문에 만약에 당신의 작은 프로그램이 나처럼 숙제를 한다면 결국 접속하지 않을 것이다. 상한선을 신청할 필요가 없으면 이 자원을 소중히 여겨라.

내 코드

이 앞부분의 wxml과 wxss 코드는 내가 직접 쓴 것이 비교적 만족스럽다. js가 실시간 채팅을 실현할 수 있다는 것은 틀림없다. 그러나 전체 플랫폼은 며칠 동안 쫓아낸 프로젝트이기 때문에 틀림없이 작은 문제가 있을 것이다. 또한 당시에 미처 보완하지 못한 문제이기도 하다.예를 들어 간혹 메시지가 발송되지만 메시지 표시줄의 내용이 아직 비어 있지 않다.예를 들어 새로운 소식이 자주 나오지만 스크롤바가 맨 아래로 내려가지 않는다.예를 들어 메시지를 보내는 지연 시간이 사용자에게 메시지를 표시하지 않고 보내는 알림은 사용자 체험에 영향을 미친다.다음은 제가 이 프로젝트의 채팅 페이지의 코드를 여기에 놓아서 참고하고 비판할 수 있도록 하겠습니다. wxml:

  
   
    
      {{messageList.content}}
    
  


  
   

wxss:

::-webkit-scrollbar{
width: 0;
height: 0;
color: transparent;
}

.chat{
  position: fixed;
  top: 0rpx;
  width: 100%;
  overflow: scroll;
  height: 90%;
  
}

.message{
  width: 100%;
}

.image_true{
  margin: 10rpx;
  float: right;
  width: 80rpx;
  height: 80rpx;
  border-radius: 40rpx;
  background-color: red;
}

.text_true{
  margin-top: 15rpx;
  margin-bottom: 10rpx;
  padding: 3%;
  display: block;
  width: 520rpx;
  float: right;
  border: 1rpx black solid;
  border-radius: 5rpx;
  color: black;
  background-color: white;
  word-break: break-all;
}

.image_false{
  margin: 10rpx;
  float: left;
  width: 80rpx;
  height: 80rpx;
  border-radius: 40rpx;
  background-color: red;
}

.text_false{
  margin-top: 15rpx;
  margin-bottom: 10rpx;
  padding: 3%;
  display: block;
  width: 520rpx;
  float: left;
  border: 1rpx black solid;
  border-radius: 5rpx;
  color: white;
  background-color: #66ffcc;
  word-break: break-all;
}

.input{
  width: 100%;
  height: 10%;
  background-color: #66ffcc;
  position: fixed;
  bottom: 0rpx;
  overflow: scroll;
}

.inputarea{
  width: 495rpx;
  height: 6%;
  margin-top: 2%;
  background-color: white;
  padding-left: 20rpx;
  border-radius: 20rpx;
  position: fixed;
  bottom: 2%;
  left: 4%;
}

.submit{
  border: 4rpx white solid;
  height: 6%;
  width: 140rpx;
  color: white;
  font-size: 100%;
  line-height: 200%;
  border-radius: 20%;
  position: fixed;
  right: 4%;
  bottom: 2%;
  text-align: center;
}

js:

Page({

  /**
   *  
   */
  data: {
    topScroll: 100000000000000000,
    input_value: '',
    goodID: '',
    myID: '',
    anotherID: '',
    avatarImg_true: '',
    avatarImg_false: '../../images/another_avatar.jpg',
    messageList: [],
    count: 0,
    timer: '',
    imageCloudPath: '',
    goodName: '',
    anotherName: ''
  },

  /**
   *  -- 
   */
  onLoad: function (options) {
    if(options.type == 1){
      this.setData({
        avatarImg_true: getApp().globalData.avatarUrl,
        myID: getApp().globalData.openid,
        anotherID: options.userID,
        goodID: options.goodID,
        imageCloudPath: options.imagePath,
        goodName: options.goodName,
        anotherName: options.userNickName
      })
    }
    if (options.type == 2) {
      this.setData({
        avatarImg_true: getApp().globalData.avatarUrl,
        myID: getApp().globalData.openid,
        anotherID: options.id,
        goodID: options.goodID,
        imageCloudPath: options.imagePath,
        goodName: options.goodName,
        anotherName: options.userNickName
      })
    }
    const db = wx.cloud.database()
    db.collection('user').where({
      _openid: this.data.anotherID
    }).get({
      success: res=>{
        console.log(res.data[0].avatar)
        this.setData({ avatarImg_false: res.data[0].avatar})
      }
    })
  },

  /**
   *  -- 
   */
  onReady: function () {

  },

  /**
   *  -- 
   */
  onShow: function () {
    var _this = this
    this.data.timer = setInterval(function () {
      const db = wx.cloud.database()
      const _ = db.command
      var chat = db.collection('chat').limit(100).where(_.or([
        {
          goodID: _this.data.goodID,
          speaker: _this.data.myID,
          listenner: _this.data.anotherID
        },
        {
          goodID: _this.data.goodID,
          speaker: _this.data.anotherID,
          listenner: _this.data.myID
        }
      ])).orderBy('time', 'desc')
      chat.get({
        success: res => {
          var list = []
          list = res.data
          console.log(list)
          for(var i=0;i{
        console.log(res)
      },
      fail: function(){
        wx.showToast({
          title: ' ',
          icon: 'none',
          duration: 2000
        })
      }
    })
    this.setData({input_value: ''})
    wx.hideLoading()
  },

  isEmpty: function (str) {
    if (str == null) return true;
    return str.replace(/\s/g, '').length == 0;
  }
})

구름 함수:send(신입자가 사용하면 업로드하기 전에 설치 의존을 잊지 마세요. 구체적인 절차는 공식 문서에 잘 적혀 있습니다)

//  
const cloud = require('wx-server-sdk')

cloud.init()
const db = cloud.database()
//  
exports.main = async (event, context) => {
  try{
    await db.collection('chat').add({
      data:{
        goodID: event.goodID,
        speaker: event.speaker,
        listenner: event.listenner,
        content: event.content,
        time: event.time,
        hasRead: event.hasRead,
        speakerName: event.speakerName,
        listennerName: event.listennerName,
        imageCloudPath: event.imageCloudPath,
        goodName: event.goodName
      }
    })
    return 'true'
  }
  catch(e){
    console.log(e)
  }
}

마지막에 쓰다

당시 프로젝트에 쫓겼기 때문에 위챗 프로그램의 비동기적인 문제는 우리가 잘 해결하지 못했기 때문에 (promise는 항상 실수를 할 수 있다) 채팅 데이터베이스에 쓸데없는 것이 많으니 여러분들이 이 이 부분을 너무 비참하게 뿌리지 않기를 바랍니다

제가 js를 많이 쓰지 않기 때문에 쓴 코드가 예쁘지 않을 수 없습니다. 선배님과 어른 여러분의 양해와 시정을 부탁드립니다. 감사합니다