Como integrar IM em projetos front-end?

Como a função de mensagens instantâneas (IM, doravante denominada IM) é usada no projeto, provavelmente é semelhante à função de atendimento ao cliente na figura a seguir:

O atendimento ao cliente pode enviar texto, fotos e vídeos aos clientes. Já existe uma função semelhante no projeto, mas a tecnologia utilizada é o websocket. Eu queria continuar usando, mas o líder considerou vários problemas ao usar o websocket antes. Deixe o autor investigar outras tecnologias relacionadas e explique especificamente o RocketChat e o Wildfire IM . Este artigo resume como integrar o IM em projetos existentes. Bem-vindo a ler e aprender. Se houver algum mal-entendido, entre em contato.

Recomenda-se ler primeiro o artigo: Como fazer ao enviar mensagens instantâneas . Dê uma olhada nas soluções relacionadas e, em seguida, voltaremos ao RocketChat Wildfire IM.

1.RocketChat

1.1 Introdução

O aplicativo de bate-papo de código aberto RocketChat pode realizar bate-papo em grupo, comunicação direta, grupo de bate-papo privado, notificação na área de trabalho, incorporação de mídia, visualização de link, upload de arquivo, bate-papo por voz/vídeo, captura de tela, etc. Ele também suporta tradução em tempo real para realizar a comunicação entre usuários. Conversão automática de mensagens em tempo real, usando o RocketChat para controlar totalmente a comunicação (a implicação é que você deseja se livrar de aplicativos de terceiros, como WeChat e QQ, prestar mais atenção à sua privacidade ou armazenar melhor seus próprios arquivos).

Após ler a documentação do site oficial do RocketChat e artigos relacionados, o entendimento do autor é: Tomando o lado web como exemplo, o RockectChat pode ser privatizado com implantação e desenvolvimento secundário, para que uma aplicação web com funções semelhantes ao WeChat possa ser feita. Para implantação, você pode consultar o artigo sobre Nuggets Deploying Rocket.Chat Open Source IM System, an Enterprise Internal Chat Tool .

1.2 Como integrar com projetos existentes

A exigência do autor é integrar a comunicação em tempo real em projetos existentes , então o Rocket suporta isso? Confira, o artigo Integrando o RocketChat com um site apresenta que você pode usar a função livechat do RocketChat para integrar as funções do RockectChat em seu próprio site. Você pode verificar a documentação do desenvolvedor , que descreve o processo de instalação do livechat-widget em detalhes.

Conforme mostrado na figura acima, na verdade é para adicionar um script ao index.html.

2. IM do Wildfire

2.1 Introdução

O site oficial do Wildfire IM apresenta-o da seguinte forma: Wildfire IM é um conjunto de mensagens instantâneas universais de código aberto e componentes de áudio e vídeo, que podem dotar mais facilmente os clientes com recursos de mensagens instantâneas, para que os clientes possam adicionar rapidamente funções de bate-papo aos seus próprios produtos . O uso do wildfire pode substituir os produtos de comunicação em nuvem ou reduzir a carga de trabalho de mensagens instantâneas autodesenvolvidas. Reduza o custo e a dificuldade de usar mensagens instantâneas e chamadas de áudio e vídeo para os clientes.

2.2 Como integrar com projetos existentes

Dei uma olhada rápida na documentação do wildfire IM, clonei o projeto vue-chat e o executei localmente.

Nota: Ao fazer login pela primeira vez, você precisa baixar o aplicativo móvel correspondente, registrar-se e digitalizar o código para fazer login, conforme mostrado na figura a seguir:

Após o autor escanear o código para efetuar login, entro na página de chat e uso o vue-devtool para localizar o componente que envia a mensagem, para que eu possa saber mais sobre o código relevante para o envio da mensagem, conforme mostrado na figura a seguir :

O código para enviar uma mensagem no componente MessageInputView.vue é mostrado na figura a seguir:

O caminho de referência do wfc é: import wfc from "@/wfc/client/wfc";dê uma olhada nesse arquivo, tem muito código, procure pelo método chamado no componente:

Conforme mostrado na figura acima, esse método é uma chamada para o método relacionado de impl. Concentre-se nesta implementação:

Quando abri este arquivo, fiquei pasmo:

Este é o arquivo compactado! Pode-se ver que a parte principal não é de código aberto e, em seguida, leia atentamente as instruções do documento para entender:

A imagem acima mostra que o Web SDK é um projeto pago, mas Demo (ou seja, vue-chat é de código aberto).

A imagem acima ilustra a necessidade de substituir o proto.min.js compactado após a compra do Web SDK.

Além disso, vejamos o projeto de demonstração do applet:

O código principal proto.min.js também é compactado, porque o Mini Program SDK também é cobrado.

Como o uni-app é gratuito, considere se você pode consultar o código do uni-app para implementar o sdk no lado da web sozinho? Então eu olhei para o código do proto.min.js na demonstração do uni-app:

Através da captura de tela do código acima, sabemos que a chave uniWfcClient.sendMessageé como introduzir o uniWfcClient aqui? Veja abaixo:

Como pode ser visto na figura acima, isso é conseguido através da introdução de plugins nativos.

A partir da figura acima, podemos ver que o plug-in nativo é um código relacionado ao Android e IOS. Se você quiser estudá-lo, precisa ter a base da linguagem relevante, o que é muito difícil! Resolutamente desistiu da ideia de referência oportunista ao uni-app para implementar o Web SDK. Se você quiser usar o SDK da Web de outras pessoas, ainda terá que comprá-lo!

Além disso, o autor também enviou um e-mail para consultar o atendimento técnico do Wildfire IM sobre algumas questões. A imagem a seguir mostra a resposta do atendimento ao autor ao autor:

3. Resumo

Existem muitas soluções para integrar o IM no projeto, como websocket, http polling, message queue, etc., mas se houver uma solução empacotada, nosso desenvolvimento será multiplicado com menos esforço. O RocketChat e o Wildfire IM apresentados neste artigo pode ser usado por todos. consulte.

Supongo que te gusta

Origin juejin.im/post/7158270853535236110
Recomendado
Clasificación