Giter Club home page Giter Club logo

demo-js-wildchat's Introduction

demo-js-wildchat — Wilddog 开源实时聊天应用

Wildchat 是使用 Wilddog 一个开源的、实时的聊天应用。它提供完全多用户,多房间,用户搜索,站内短信,聊天邀请等等。

在线示例

访问 wildchat.wilddogapp.com 查看 Wildchat 在线示例.

 在 Wildchat 演示聊天截图

在线文档

 在 Wildchat 在线文档

本地运行

首先确认本机已经安装 Node.js 运行环境,然后执行下列指令:

git clone [email protected]:WildDogTeam/demo-js-wildchat.git
cd  demo-js-wildchat

安装依赖:

npm install bower -g
npm install
bower install

编译项目:

grunt

生成结果:

dist/
├── wildchat.css
├── wildchat.js
├── wildchat.min.css
└── wildchat.min.js

生成本地文档

本地文档是用jekyll构建的,jekyll需要ruby环境的运行环境。如果没有ruby环境,可以查看上面的在线文档。

cd website/
jekyll s

生成web部署文件:

jekyll build

生成结果:

_site/
├── css
│   ├── pygments-borland.css
│   └── styles.css
├── docs
...

12 directories, 32 file

下载

Wildchat 工作原理简单,前提是在你的应用程序正确的依赖它,并配置 Wilddog 帐户系统。 为了在你的项目使用 Wildchat, 需要包括 HTML 在内的以下文件:

<!-- jQuery -->
<script src='http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js'></script>

<!-- Wilddog -->
<script src='https://cdn.wilddog.com/js/client/current/wilddog.js'></script>

<!-- Wildchat -->
<link rel='stylesheet' href='https://cdn.wilddog.com/app/wildchat/0.5.0/wildchat.min.css' />
<script src='https://cdn.wilddog.com/app/wildchat/0.5.0/wildchat.min.js'></script>

使用上面提到的URL可以从Wilddog的CDN上下载到Wildchat的精简版和非精简版。你也可以从Wilddog的Github中下载他们。当然啦,Wilddog可以在官网上下载。

你也可以通过npm 或者 bowr安装Wildchat, 他们会自动下载依赖。

$ npm install wildchat --save
$ bower install wildchat --save

示例代码

  • 添加用户登录
<script>
// Create a new Wilddog reference, and a new instance of the Login client
var chatRef = new Wilddog('https://<YOUR-WILDDOG>.wilddogio.com/chat');

function login() {
  chatRef.authWithOAuthPopup("weibo", function(error, authData) {
    if (error) {
      console.log(error);
    }
  });
}

chatRef.onAuth(function(authData) {
  //  一旦通过验证,Wildchat实例携带我们的用户ID和用户名
  if (authData) {
    initChat(authData);
  }
});
</script>

<a href='#' onclick='login();'>登录微博</a>
  • 初始化一个聊天。
<script>
function initChat(authData) {
  var chat = new WildchatUI(chatRef, document.getElementById('wildchat-wrapper'));
  chat.setUser(authData.uid, authData[authData.provider].displayName);
}
</script>

<div id='wildchat-wrapper'></div>

注册Wilddog

Wildchat 需要 Wilddog 来同步和存储数据。您可以在这里注册一个免费帐户。

更多示例

这里分类汇总了 WildDog平台上的示例程序和开源应用, 链接地址:https://github.com/WildDogTeam/wilddog-demos

支持

如果在使用过程中有任何问题,请提 issue ,我会在 Github 上给予帮助。

相关文档

License

MIT http://wilddog.mit-license.org/

感谢 Thanks

demo-js-wildchat is built on and with the aid of several projects. We would like to thank the following projects for helping us achieve our goals:

Open Source:

  • firechat Real-time Chat powered by Firebas
  • JQuery The Write Less, Do More, JavaScript Library

demo-js-wildchat's People

Watchers

 avatar  avatar

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.