Giter Site home page Giter Site logo

unmagic / wechat-im Goto Github PK

View Code? Open in Web Editor NEW
1.7K 48.0 355.0 6.64 MB

微信小程序即时通讯模板,使用WebSocket通信

Home Page: http://blog.csdn.net/sinat_27612147/article/details/78456363

License: MIT License

JavaScript 100.00%
wechat-im wechat im

wechat-im's Introduction

wechat-im

Build Status Version status Code Size Dependency status GitHub

微信小程序即时通讯

开发这个项目付出了我很多心血,如果对你有帮助和启发的话,希望在GitHub上给个star!也是对我工作的支持和肯定!

也非常感谢kulovecc对项目中文本超长溢出布局的问题的修正和提交!

介绍:

wechat-im是一个可以让你在小程序平台快速实现即时通讯功能的完整模板。

现已更新2.x.x版本

相对1.0.x及之前的版本,2.x.x新增的特性

  • 全面使用ES6语法,异步操作使用Promise和async语法糖,让代码更符合语义!(需要较新的微信开发工具,并开启"增强编译")
  • 文本输入功能已使用Component组件化,比之前的版本性能更好!
  • 最低支持微信基础库版本为2.6.1(之前的最低支持是1.4.0)
  • 修复了一些场景下的问题。比如播放语音消息时,退出聊天界面,依旧会播放语音的问题。
  • 2.x.x文档,过些日子再更新吧。有能力的同学可以更新啦,大部分是语法的更新和组件化。我近期比较忙,很抱歉各位同学。

特性:

  • 目前项目中已使用webSocket,实现了IM的通信功能!目前包括会话列表页面、会话页面及好友页面。支持使用nodejs开启本地WebSocket服务。
  • 支持发送文本、图片、语音,支持输入法的emoji表情
  • 支持拍照,图库选择图片、图片预览
  • 支持切换到文本输入时,显示发送按钮。
  • 支持语音播放及播放动画。
  • 支持配置录制语音的最短及最长时间。
  • 支持配置自定义事件。
  • 支持聊天消息按时间排序。
  • 支持发送消息后,页面回弹到最底部。
  • 使用了最新的语音播放接口,同时兼容了低版本的语音播放接口。
  • 消息发送中、发送成功、发送失败的状态更新
  • 支持消息发送失败情况下,点击重发按钮重新发送
  • 优化时间气泡显示逻辑,相邻信息大于5分钟显示后者信息的时间
  • 在页面最上方增加了会话状态的UI展示
  • 自定义功能,显示自定义气泡。
  • 通过解析语音或图片消息信息,优先读取本地文件。
  • 实现了文件存储算法,保证10M存储空间内的语音和图片文件均为最新。
  • 各消息类型和各功能均已模块化,让你在浏览代码时愉悦轻松。(其实这算不上组件特性。。。)

目前不支持的功能:

  • 如果要使用群聊,目前的UI中,头像旁并没有展示成员昵称。
  • 本地没有存储历史聊天消息。原因请看文档结尾。
  • 目前WebSocket所有功能仅供学习和参考,若想商用,请自行开发。
  • 目前还不支持以插件方式使用。

学习或使用该项目,需要你具备哪些条件

  • 需要你熟悉ES6的语法规范,以及设计模式,否则该项目对你来说门槛很高。
  • websocket不必深入掌握,但需要你知晓WebSocket的常见API及其用法,详见小程序WebSocket
  • 了解npm依赖的安装,命令的执行(这块主要用于启动本地的WebSocket服务)

如何安装使用

1. 开发者工具导入项目

修改app.js文件中下面配置的url为你本地网络ip及固定的端口号8001,即ws://xx.xx.xx.xx:8001
this.imWebSocket.createSocket({url: 'ws://10.4.97.87:8001'});

2. 搭建本地WebSocket服务

项目根目录下启动Terminal
需先安装依赖 npm install
执行 npm run server  即可开启WebSocket服务

3. 使用开发者工具运行项目

如果你的项目使用这个框架并且正式投入运营,方便的话可以提供下你们的小程序二维码,我可以在这里为大家推广。

LINK

Document

Questions

ChangeLog

LICENSE

合作

技术交流请加QQ群:一群 821711186 (已满) 二群 834335591

如有合作意向或是想要推广您的产品,可加QQ:1178545208

欢迎打赏

wechat-im's People

Contributors

kulovecc avatar unmagic avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

wechat-im's Issues

如何接入腾讯云即时通讯IM

您好,我这边想接入腾讯云即时通讯IM,目前demo是用的WebSocket,如果要接入IM请问需要修改哪呢,比如app.js哪里

chat-input组件的问题

我这边这个chat-input组件,开始调用的时候,如果拒绝录音权限,然后就一直提示录音时间太短。不能重新唤启权限的请求

关于小程序的部署

作者你好,我最近在开发一个微信公众号,需要接入你这个小程序的功能,请问应该怎么在服务器上部署你的项目呢? 以及在微信小程序上应该如何设置? 期待你的回复

Do not have null handler in current page

Do not have null handler in current page: pages/chat/chat. Please make sure that null handler has been defined in pages/chat/chat, or pages/chat/chat has been added into app.json

小程序即时通讯,求合作!

看了您做的感觉不错,目前仅是技术,没有上层的业务,可否加个微信沟通下,求合作,可支付费用! 微信:bear17169779

小建议

聊天消息比较多的时候:
用户在浏览顶部的消息,突然想打字:

当用户点击输入框、文字语音切换按钮、+ 这三个功能点时,页面应该下拉到最底部。

下拉加载历史消息记录, scroll-view 会抖动

上拉加载历史聊天记录, 当往页面插数据时, 插入数据的空间会将整个页面往下平移,然后用scroll-into-view就会跳到指定的位置. 但这个过程体验十分不好 先页面抖动然后再定位到指定的地方

聊天气泡bug

image
当英文字符过长的时候,字符会显示再气泡外

您好. 请问你们服务端选择了哪个第三方 im 服务?

你好. 我这边有和您有同样的需求的一个小程序.. 我想请问下. 即时通讯你们服务端采用的是什么技术..

用的是哪个第三方即时通讯服务. 如: 腾讯的云通信, 网易云信, 环信、亲加, 融云???

还是你们自己写的呀 ?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.