zoukankan      html  css  js  c++  java
  • 仿PC版微信的练手项目(可实时通讯)

    仿PC版微信的DEMO

    本项目是由一个仿PC版微信的vue前端项目,和一个使用leancloud进行数据存储的、提供WebSocket的node后端项目构成。

    本项目使用的技术栈:vue + vue-router + socket.io + leancloud

    这是一个自己练手的项目,因为想做一个vue项目,同时又想做一个node.js项目,而且还想试一试WebSocket和leancloud。。。(有点纠结)

    项目地址

    前端:https://github.com/j20041426/wechat

    后端:https://github.com/j20041426/wechat-server


    前端介绍

    文件结构

    用法

    目前只实现了聊天功能和联系人列表功能。除了一开始需要输入用户名登录以外,其他用法跟PC版的微信一毛一样,就不多介绍了。

    代码原理

    主要使用了vue和vue-router来构建单页面应用。

    如上图

    • 红色框范围内是App.vue,是项目默认加载的组件,最左边的导航栏组件固定显示。路由地址是/index。

    • 橙色框范围内是由message/index.vue和contact/index.vue组件构成,由一级路由来选择渲染。路由地址是/index/message和/index/contact。

    • 黄色框范围内是由message/session.vue和contact/userinfo.vue组件构成,通过二级命名路由来选择渲染。路由地址是/index/message/XXX和/index/contact/userinfo/XXX,其中XXX表示一个具体的ID值,通过命名路由的形式,可以将ID值作为获取对应信息的凭据。

    后端介绍

    文件结构

    拉取数据的接口都写在routes目录里,针对登录、聊天、联系人三个功能分别实现了三个路由文件,每个文件里包含若干接口。

    与WebSocket相关的代码都在socket目录里。在index.js中初始化WebSocket并且开始监听,在onlineUsers.js中维护了一个在线用户的数据结构,用来针对性的发送消息。

    代码原理

    1. 当前端用户登录时,会向后端发送join消息并带上用户ID,这时后端会将该用户的ID和对应socket对象存入数组中。

    2. 当前端用户发送消息时,会向后端发送send消息并带上消息内容和会话ID,后端接收到后会将这条消息新增到对应ID的会话中,然后通知该会话ID中包含的所有在线成员。通知是以后端发送refresh信息实现的。

    3. 当前端用户断开连接时,后端接收到disconnect消息后,会将该socket对象从数组中删除。

    目前存在的问题

    这个项目的初衷是希望通过部署到leancloud的托管服务器上,来获得一个免费的可访问的公网服务端。但是由于某些我还不清楚的原因,WebSocket会提示连接超时,无法实现实时通讯的效果。

    想运行起来看效果的同学,就在本地同时运行后端和前端即可。

  • 相关阅读:
    Linux(CentOS)下安装OMNet++
    Linux(CentOS)安装JDK
    给电脑安装Linux系统(CentOS)
    OmNet++遇到的问题
    数论倒数总结
    [AHOI2007]密码箱
    [AHOI2005]约数研究
    Spark scala groupBy后求和
    Scala Seq创建简单的Spark DataFrame
    Spark DataFrame分组后选取第一行
  • 原文地址:https://www.cnblogs.com/MrEgg1013/p/7151322.html
Copyright © 2011-2022 走看看