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

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

在线示例

访问 wildchat.wilddogapp.com 查看 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

如果遇到

Dependency Error: Yikes! It looks like you don't have pygments or one of its dependencies installed. In order to use Jekyll as currently configured, you'll need to install this gem. The full error message from Ruby is: 'cannot load such file -- pygments' If you run into trouble, you can find helpful resources at http://jekyllrb.com/help/!
  Liquid Exception: pygments in docs/index.md
             ERROR: YOUR SITE COULD NOT BE BUILT:
                    ------------------------------------
                    pygments

请执行

gem install pygments.rb  --source http://rubygems.org

生成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.6.0/wildchat.min.css' />
<script src='https://cdn.wilddog.com/app/wildchat/0.6.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 config = {
  authDomain: "<appId>.wilddog.com",
  syncURL: "https://<appId>.wilddogio.com",
};
wilddog.initializeApp(config);

var chatRef = wilddog.sync();
var auth = wilddog.auth();
var weiboProvider = new wilddog.auth.WeiboAuthProvider();

function login() {
  wilddog.auth().signInWithPopup(weiboProvider).then(function (user) {
    //  一旦通过验证，Wildchat实例携带我们的用户ID和用户名
    initChat(user);
  }).catch(function (error) {
     console.log(error);
  });
}
</script>

<button onclick='login();'>登录微博</button>

• 初始化一个聊天。

<script>
function initChat(authData) {
  var chat = new WildchatUI(chatRef, document.getElementById('wildchat-wrapper'));
  chat.setUser(authData.uid, authData.displayName);
}
</script>

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

注册Wilddog

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

更多示例

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

支持

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

相关文档

• demo-ios-wildchat Wildchat iOS 版本
• Wilddog 概览
• JavaScript SDK快速入门
• JavaScript SDK API
• 下载页面
• Wilddog FAQ
• jekyll 中文 开源软件，功能是将纯文本转化为静态网站和博客
• jekyll 中文安装文档

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