最新的chart 聊天功能( webpack2 + react + router + redux + scss + nodejs + express + mysql + es6/7)

请表明转载链接:http://www.cnblogs.com/zhangkunweb/p/6853728.html

我是一个喜欢捣腾的人,没事总喜欢学点新东西,可能现在用不到,但是不保证下一刻用不到。

我一直从事的是依赖angular.js 的web开发,但是我怎么能一直用它呢?看看最近火的一塌糊涂的reactjs ,我的天啊,不学会它,怎么能睡好觉。

今天我分享一个依赖最新版本的webpack + react + router + redux + scss + nodejs + mysql + es6/7 实现一个聊天功能。

可以点击下载:https://github.com/zhangKunUserGit/myChart)它包括:(头像是随便弄得,现在没有什么功能和意义)

(1)登录/注册

(2)聊天

特色:

  1.支持检查用户名重复和密码错误;

  2.支持多处登录聊天,其中一处退出不影响其他设备(不同浏览器)登录情况

  3.点击鼠标右键,可以操作自己的聊天信息(现在只做了删除功能);

  4.可以上下伸缩信息框和输入框;

  5.聊天信息支持分批加载;

  6.在输入框上 按Shift+Enter换行,Enter发送信息;

  7.加载时,导航下面有流行的loading 动画效果;

由于精力和时间问题,它是不完美的,它的不足:

  1.暂时不支持一键复制和编辑;

  2.没有私聊和房间(群)的功能;

  3.没有添加好友功能;

  4.暂时没写响应式;

  5.没有头像上传和截图功能;

  6.忘记密码和编辑自己的信息功能;

  8.没有单元测试;

  9.。。。。。。

看样子功能还有很多没做啊。我有时间一定补上,如何你有时间也可以帮我补补。

最后附上我的mysql 表 ,我总共创建了两个表,一个叫users,存用户的信息;另一个是chartContent, 存聊天信息;列名如下:

(1)users表:

(2)chartContent表:

由于没有经过专业测试人员测试,所以可能有bugs, 希望大家运行后,有问题及时反馈,我会及时修改,谢谢大家。

时间: 2024-10-25 21:53:41

最新的chart 聊天功能( webpack2 + react + router + redux + scss + nodejs + express + mysql + es6/7)的相关文章

用 Vue.js + Firebase 製作即時聊天功能

這幾天在練習用vue & firebase刻一個仿line即時同步聊天的功能,直接初體驗vue.js + firebase + webpack三種願望一次滿足XD! update: 20170923更新[用 Vue.js + Firebase 製作即時聊天功能(2) - storage](https://guahsu.io/2017/09/vue-firebase-realtime-line-chat-2-storage/) >DEMO< >原始碼-GitHub< 這幾天想

20 行代码极速为 App 加上聊天功能

现在很多 App 都需要集成 IM 功能,今天就为大家分享一下集成 IM 基本功能的步骤.本文内容以 JMessage 为例.极光 IM ( JMessage ) = 极光推送 ( JPush ) + IM,本篇只论述其中的 IM 部分,为大家快速集成 IM 功能提供一个简明的范例. 我们先来看一下 IM 的基本功能与本文内容的对应关系: line 0:准备工作 下载 SDK 集成 SDK line 1:引入头文件 #import <JMessage/JMessage.h> JMessage

[转] React Router 使用教程

你会发现,它不是一个库,也不是一个框架,而是一个庞大的体系.想要发挥它的威力,整个技术栈都要配合它改造.你要学习一整套解决方案,从后端到前端,都是全新的做法. 举例来说,React 不使用 HTML,而使用 JSX .它打算抛弃 DOM,要求开发者不要使用任何 DOM 方法.它甚至还抛弃了 SQL ,自己发明了一套查询语言 GraphQL .当然,这些你都可以不用,React 照样运行,但是就发挥不出它的最大威力. 这样说吧,你只要用了 React,就会发现合理的选择就是,采用它的整个技术栈.

React漫漫学习路之 React Router

React Router 是一个基于 React 之上的强大路由库,它可以让你向应用中快速地添加视图和数据流,同时保持页面与 URL 间的同步. 目前react-router最新版本已经到4.0+,因为新的版本是一次非常大的改动,所以这里直接讨论4.0以上版本. 引用 react-router // React Router 核心 react-router-dom // 用于 DOM 绑定的 React Router react-router-native // 用于 React Native

[Web 前端] React Router v4 入坑指南

cp from : https://www.jianshu.com/p/6a45e2dfc9d9 万恶的根源 距离React Router v4 正式发布也已经过去三个月了,这周把一个React的架子做了升级,之前的路由用的还是v2.7.0版的,所以决定把路由也升级下,正好“尝尝鲜”... 江湖传言,目前官方同时维护 2.x 和 4.x 两个版本.(ヾ(??﹏?)??咦,此刻相信机智如我的你也会发现,ReactRouter v3 去哪儿了?整丢了??巴拉出锅了???敢不敢给我个完美的解释!?)事

react router 4.0以上的路由应用

thead>tr>th{padding:8px;line-height:1.4285714;border-top:1px solid #ddd}.table>thead>tr>td,.table>tbody>tr>th,.table>tbody>tr>td,.table>tfoot>tr>th,.table>tfoot>tr>td{padding:8px;line-height:1.4285714;ver

[Asp.net 开发系列之SignalR篇]专题二:使用SignalR实现酷炫端对端聊天功能

一.引言 在前一篇文章已经详细介绍了SignalR了,并且简单介绍它在Asp.net MVC 和WPF中的应用.在上篇博文介绍的都是群发消息的实现,然而,对于SignalR是为了实时聊天而生的,自然少了不像QQ一样的端对端的聊天了.本篇博文将介绍如何使用SignalR来实现类似QQ聊天的功能. 二.使用SignalR实现端对端聊天的思路 在介绍具体实现之前,我先来介绍了使用SignalR实现端对端聊天的思路.相信大家在前篇文章已经看到过Clients.All.sendMessage(name,

我们一起学习WCF 第九篇聊天功能

说到聊天,那么其实就是传输数据,把自己写的东西传给自己想发送的那么人.我总结一下传输有三种方式 1:就是我们常见的数据库传输 2:就是文件(流)传输 3:就是socket传输 今天我们说的wcf实现聊天其实是基于socket的聊天功能(QQ聊天发展到今天肯定是很牛的了,但是最初肯定也是这样的思想) 今天我先说说基于WCF聊天的原理 1:需要一个回调函数(当用户发送的时候会吧信息回调给客户端本身) 2:需要一个委托(把服务器传来的信息显示给前台) 3:需要一个触发点击事件(目的是为了触发把发送信息

安卓平台基于SIP协议实现注册,聊天功能

============问题描述============ 不涉及音频,视频发送,只要实现注册,和聊天功能就行, 网上下了sipdroid的源码,但是XML中配置的<uses-sdk android:minSdkVersion="3" android:targetSdkVersion="4"/> 这段没明白,资料里说安卓最低支持SIP协议的API level是9,但是这版本不匹配呀,有大牛指导下么 ============解决方案1============