Ali soeur REVIEW: deux onze Lynx est devenu un symbole généralement acceptée de la culture populaire, et plus tard, le chat est un important noeud de connexion des lignes sous la ligne. La tâche de 2017 Lynx partie a été remis à la réception en direct Youku à ours. Youku en direct Youku hôte et équipes invitées, groupe d'architecture Youku et d'autres partis ont formé une équipe de projet commun et travailler ensemble pour entreprendre Youku fin deux-onze chats tâches de développement en direct.
origine
Bien que Youku en direct d'affaires en ligne est stabilisée, mais nous vivons encore beaucoup de problèmes à résoudre.
En plus d'ouvrir un spectacle en direct cette fonction la plus importante, l'équipe de projet du parti prévoit également un coup de pouce / action courtoise, jeu-questionnaire, ouvrez le coffre, la pluie rouge et d'autres jeux interactifs d'une grande variété de besoins pour augmenter le nombre de fonctions sur entre l'original en direct autochtone.
Pire encore, le parti n'est pas sur l'investissement, la demande de lieu en direct a été changé. En particulier, la demande peut entraîner un cadre de pelures des sites en direct lieu changement important a eu lieu, avec en direct entre l'ancien indigène répondre à ce changement de la demande plus difficile.
Nous avons donc décidé de réécrire Weex entre un nouveau Youku en direct restaurer complètement le service entre le live actuel natif, tout en ajoutant le support pour une variété de deux-onze jeux interactifs sont joués. Entre le vieux Naitve vivre seulement comme un déclassement de sauvegarde de studio.
package de composant
Avant le début officiel des travaux, la première chose que nous divisons modules fonctionnels pour déterminer quel module Weex sdk ou aliweex propre implémentation composant natif, quels sont les modules nécessaires au code natif existant est emballé comme un composant Weex pour le code d'entreprise Weex références.
La figure ci-dessus forme finale entre deux à onze émission de yoqoo, qui est généralement architecture fonctionnelle et technique comme le montre la Fig.
Après évaluation, nous faisons ce qui suit Module division:
-
cadre Lieu: construire un code d'entreprise Weex
-
Revenant sur l'onglet liste: contient graphique est une liste de vidéos, réalisé par natif Weex
-
onglet chat: le chat contient un grand nombre de bulles et la logique métier complexe efficace mobile, la salle de chat original code natif Package composant Weex
-
onglet en direct graphique: contient l'image terme, texte logique complexe, vidéo, lien, etc., l'original code natif est emballé comme composant Weex
-
composants du lecteur: code natif du joueur en direct d'origine est emballé comme composant Weex
-
Il sentira beaucoup d'animation lorsque le composant est cliqué ou recevoir push serveur de messagerie interactive, notre choix est le code natif d'origine est emballé comme composant Weex: étiquette pouces
-
Onglet personnalisé: Ce composant encapsule notre propre WebView d'un composant, comprenant une pluralité de fonctions
Le reste du saut, le partage de l'ensemble du module de la fonction de surveillance Buried Weex Module est utilisé pour le code de service weex
Après l'achèvement du module de fonction split, entre l'ensemble de diffusion est devenue entièrement assemblée, modulaire et peut être combiné librement, la décomposition, la coutume.
Quel que soit l'avenir des changements de la conception des sites, tant que la préparation du nouveau lieu de la peau, selon les différents besoins des étiquettes personnalisées intégrées, la combinaison sera en mesure de vivre le lieu nécessaire.
support de jeu interactif
Les étudiants du système de distribution exploitation à Taiwan Youku sujet de modérateur d'édition en direct, les peelings, après enveloppes rouges de pluie et d'autres nouvelles interactives, des informations de livraison spécifiques seront remplis serveur de modèles de dynamique de jeu interactif, à travers le canal sous PowerMsg envoyé à la fin, quand après avoir reçu un tel message sur le côté interactif, directement par le globalEvent envoyé Weex lieu en direct, le lieu analyse le champ reçu, selon les instructions montrent le sujet hôte, tirer vers le haut de la poitrine, la page de la pluie rouge et ainsi de suite.
Rétrograder
Downgrade la page Weex et dans le cas général à une autre page H5, on rabaisse la logique est chargée Génération / Saut / fonctionnement anormal, de sauter de la pièce à vivre parmi les autochtones vivent Weex, donc nous ne suivons pas la dégradation Weex logique commune, en outre obtenu est une logique de déclassement.
Les difficultés rencontrées et les solutions
conflit Gesture
lieu en direct dans le processus de développement, nous avons rencontré un cadre TabBar problème et conflit personnalisé geste composant Weex.
Nous voulons glisser vers le haut et vers le bas par geste l'onglet en cours est reçu, vous pouvez glisser vers le haut et vers le bas dans la liste actuelle
Nous espérons Swipe geste est reçu TabBar, pour basculer entre les différents onglet
Cependant, l'utilisation de composants TabBar Weex personnalisé et obligatoire, ou de haut en bas geste onglet courant consommé entièrement empêcher la commutation entre onglet. Ou haut et en bas gestes sont rongés par TabBar, conduisant à l'onglet en cours ne peut pas glisser vers le haut et vers le bas
La figure est une logique simplifiée Android Voir la distribution des événements de clic
Produira un conflit de diapositives avec la vue parent enfant Voir et peut glisser, une routine commune est la vue parent de onInterceptTouchEvent () faire pour intercepter:
onInterceptTouchEvent public boolean (événement MotionEvent) {
booléen interceptés = false;
commutateur (event.getActionMasked) {
cas MotionEvent.ACTION_DOWN:
interceptés = false;
break;
cas MotionEvent.ACTION_MOVE:
si (interception de contrôle parent) {
intercepté = true;
} Else {
interceptés = false;
}
break;
...
}
...
retour interceptée;
}
Enfin, notre solution consiste à réécrire une balise Div personnalisée, sur mesure Weex Component intégration tag Div personnalisé, balise personnalisée Div manger glisser vers le haut et vers le bas geste et passé à personnaliser Weex composants, de sorte que les gestes de mouvement vers la gauche et à droite jetés comme Vue TabBar parent de traitement, ce qui résout ce conflit geste.
Cependant, le lieu en direct le code Weex utilise ExpressionBinding pour optimiser les propriétés de glissement, les nouvelles pistes de solution à ExpressionBinding inefficace.
Pour résoudre ce problème, nous réécrivons le Weex de WXGesture code de reconnaissance de geste pour remplacer le code par défaut d'identification de geste WXComponent vient donc ExpressionBinding revalidation.
séquence d'exécution ExpressionBinding est la suivante:
touchstart - > panstart - > ExpressionBinding panstart - > ExpressionBinding panmove - > ExpressionBinding panend - > touchEnd - > panendLe concept de base est l'événement détecté panstart, puis effectuer une pré-couche de js transmis « logique de traitement de geste » plutôt que de passer le traitement de la couche de geste reconnu.
Nous balise Div personnalisée et modifions Component Weex custom rend ExpressionBinding ne pas reconnaître incident panstart. Nous allons donc donner WXComponent WXGesture réécrite où leur émission aux bons endroits:
WXGestureType.HighLevelGesture.HORIZONTALPAN
ou:
WXGestureType.HighLevelGesture.VERTICALPAN
Événement, ExpressionBinding déclenchement artificiellement un code d'identification est exécutée, de sorte que, finalement, définir étiquette ExpressionBinding Div et travail indépendant Weex composante auto-défini.
Mettez l'optimisation de l'expérience de l'écran
Youku avant que la page en direct est transféré directement à l'écran d'activité se retourner, puis laisser le support vidéo plein écran, Pour restaurer portrait mettre le dos à leur tour d'activité, restaurer la taille d'origine vieoView, de sorte que le reste de la mise en page est affichée.
En raison de la complexité du nouveau lieu en direct Weex grandement améliorée si elles devaient passer l'expérience de l'écran deviennent très mauvais, l'écran passe à un écran noir pendant un certain temps après chaque à reparaître de mise en page.
Après plusieurs tentatives, nous adoptons la solution suivante pour améliorer l'expérience: différents paramètres de mise en page tour portrait paysage, VideoView premier enregistrement, puis retiré de son parent VideoView Voir, attacher directement à la fenêtre en cours decorView . De retour portrait du paysage, de la prise VideoView decorView dans la Ajouter vue sur la vieille mère, puis réinitialiser les différents paramètres de mise en page.
Après cette optimisation, l'expérience de l'écran de tour est grandement améliorée, même sur des machines bas de gamme il y a quelques années, avait aussi des écrans de commutation pour terminer l'action très rapidement.
filet vidéo
Comme le montre, la vidéo en direct deux à onze diffusion des sites est intégré dans un écran de télévision du Lynx. La mise en uvre est sur la vidéo dans une étiquette personnalisée couvre une des images de télévision de chat de jour, faire des vidéos de révéler seulement une boîte arrondie.
Cette mise en uvre ne pose aucun problème à la fin de iOS, sur Android, mais inefficaces, les problèmes de la vidéo et des images de la hiérarchie dans les quatre coins de la vidéo Android sera toujours brillé à travers, très laid visuellement.
Notre solution est d'ajouter un composant de lecteur personnalisé attribut « borderRadius », l'image TV quantité valeur arrondie conception DFT courants d'air, de mettre en place une étiquette vidéo personnalisée, cette valeur se propage à travers la couche native, après 750px après la conversion, la vidéo VideoView natif mode direct approprié coupe limée.
Enfin, la présentation de l'écran vidéo et de la télévision avec des coins arrondis arrondi image d'un ajustement parfait, ressembler à un.
Le rendu des pages vitesse et optimisation de l'expérience
Lazy loading
Entre Weex est en direct l'écran par défaut est vertical, mais peut aussi tourner l'écran à l'état du paysage. Lorsque la plupart Weex est entré dans le studio, l'ancienne logique est initialise la mise en page dans la mise en page et le paysage sous le portrait, il prend plus de temps. Notre modification est nécessaire uniquement pour initialiser les composants à écran vertical en entrant dans le studio, les composants nécessaires dans le paysage chargement paresseux, quand le besoin réel pour créer et initialiser.
l'optimisation de la mise en page redondante
l'optimisation mise en page pour réduire le niveau sera visibilité pour supprimer tous la vue redondante disparu.
De plus, Weex page lieu en direct également fait beaucoup de niveaux / Voir le fonctionnement simplifié, charger les deux ensemble et fait en fin de compte, l'expérience a été grandement améliorée.
Il est révolu comme l'optimisation de l'animation
Bravo icône est un live entre package natif Weex Component, ou lorsque l'utilisateur clique manuellement reçu d'autres les pouces de l'utilisateur pousser, icône de point sentira d'autres photos envoyées par le nombre de coeurs ou serveur.
Comme une des fonctions Aspect rugueux mis en uvre aucun problème, mais le problème dans des conditions de répétition du soir haute sur l'exposé concurrency, parce que l'utilisateur est trop grand, trop de messages push pouces, pouces fin d'animation Android deviendra très carte Dayton.
Notre solution est de faire un commutateur Orange, réduire ou un écran flottant films Chan sur une machine moins puissante, recevoir des messages push pouces après, plus immédiatement commencé à donner animation pouces, mais comme plus d'un certain nombre de points la valeur de seuil ou supérieure à un certain intervalle de temps avant que l'animation qui flotte, ce qui rend la pression sur l'extrémité réductrice.
De plus, nous notons que la louange des animations flottantes directement après la destruction zone d'affichage qui flotte, puis créer une nouvelle image si nécessaire Transportant nouvelle animation, nous devons considérer la technologie dans le bassin de la cible attribuée pré-certains cadres d'animation et les multiplexes, mais en raison du temps pas publié en ligne.
Pour réduire le stress du serveur
1 zcache regrouperons Weex JS, des images et d'autres ressources statiques par zcache poussé au client.
Pression (1) réduire le chat plus tard le même jour, le client demande au serveur de ressources de traction
(2) en raison à demander des ressources dans le local, améliorant considérablement la vitesse de rendu des pages
(3) améliorer le taux de réussite de chargement de la page
2 La demande d'adhésion des Mtop fonctions d'interface complexes, Weex et code natif doivent demander et appeler le moment ne pouvait être déterminée. Nous encapsule un module Weex Mtop, en tenant compte des demandes et Datapool fonctions Mtop, Weex et code natif pour demander la délivrance de mtop ce module; Lorsqu'une demande est faite, les demandes répétées de la même interface à court terme sera mis en cache, la première après une demande de retour de données, le résultat sera notifiée à tous demandeur MTOP mises en cache. En optimisant ce petit, nous allons mettre fin à un service QPS pression diminue plus de 100000.
3 chats tard le même jour, seule une interface côté demande de service minimum, ne demande plus comme « remorque studio abonner à » interfaces non essentielles et autres.
Fin résultat direct de deux onze chats
En fin de compte, 11 doubles Youku en direct obtenir de meilleurs résultats:
1. Puissance Lynx double 11, pour guider l'utilisateur clique 6,55 millions.
2. chat tardif à la hauteur de 2,09 millions en ligne.
Nous vivons dans le chemin critique des joueurs des sites et Youku en direct ensevelis avec des informations de point, l'information selon les statistiques:
étouffant
Deux-onze à la salle en direct est basée, selon les normes suivantes entre le style ancien récrire en direct une peau, entre Weex vivent déjà sur le montant total de la ligne, entre l'ancien diffusion en direct natif Youku a été hors de la ligne d'assemblage dans les affaires. Nous vivons entre deux à onze Weex développé une variété de jeux interactifs a débarqué des moyens d'opération de normalisation en direct Youku.
Les deux-onze chats vivent fin Weex est le plus grand projet entrepris par l'utilisation de l'histoire Youku, mais aussi le plus grand nombre de projets en direct en ligne sur l'histoire d'Ali. Dans le cadre de la coopération des différents départements, tout au long de la tâche en direct du soir bon déroulement, sans circonstances imprévues.
Dans la base deux à onze courant des résultats du lieu en direct, entre Weex en direct supporter non seulement l'ensemble de la ligne actuelle entreprise Youku de diffusion, prendra la prochaine veille du Nouvel An, la tâche en direct Nouvel An chinois Gala, l'équipe présentera plus en direct et plus refroidir les jeux interactifs sont joués, l'expérience plus fluide de la charge en direct, restez à l'écoute.
