話話
約一年前、私はこの製品について知る必要がありました。その時も、私は駅があったが、それに固執しませんでした。これは、第二の試みです。オリジナルの根拠、よりカスタムの増加で。ここではどのようなチャットサイトへのアクセス方法についての記録。
簡単なアクセス
xianliao.meは、サイトにアクセスするための最も簡潔な方法をサポートすることで、唯一の彼らの公式ウェブサイトでアカウントを登録する必要があります。あなたはweb_idとSSO_keyを得ることができます。
上の写真によると、唯一のあなたは非常に簡単なコードを使用する必要があり、あなたのウェブサイトにアクセスすることができます。
しかし、非常に現実的な問題は、訪問者が参加したい場合は、マイクロチャネルを掃引し、チャットを開始するためにログオンする必要があり、そこにあります。
ウェブサイトのトラフィックが特に重いです、このステップは、来場者の大きな波を落胆されなければならないと信じてはいけません。だから、そこに以下。私は彼のAPIを介して構築するにはどうすればよいだけではランダムチャットシステムを起動することができ、ユーザー名を入力する必要があります。
解析API
でxianliaome公式サイト、我々は、彼らが提供することがわかったカスタムコードへのアクセス機能を、私たちができる携帯電話側のアクセス、APIを訪問者にチャットを提供するために、「ユーザーログオン」をシミュレート。
どのような方法で携帯電話側のアクセスチャット：
https://xianliao.me/s/你的web_id?mobile=1&uid={登录用户的ID}&username={登录用户的用户名，需要做URI encode}&avatar={登录用户的头像URL，需要做URI encode}&ts={当前的Linux timestamp}&token={即xlm_hash，见下附的xlm_hash的生成方法}
私たちは、ログオンしているユーザーID、ユーザー名、我々は特定の規則によってシミュレートすることができるユーザアバター、上記の情報をインタフェースを介して見ることができます。完全な取得そして、シミュレーションユーザーをチャットに提供し、その後、彼は私たちに完全なチャットウィンドウに戻ります。
シミュレートされたユーザー
ユーザーID
我々は繰り返すか、生成規則の小さなチャンスを複製する必要がないので、最初に私のテストの後、同じweb_idの下で、ユーザーIDが重複することはないことを宣言しなければならないことは、繰り返しは、ユーザーと同じになりますユーザーIDを生成します。
私たちが使用して乱数、生成すると9301、49297、233280：ベースとして3つの数字を（ここでは、原則として参照https://www.zhihu.com/question/22818104理論的には、重複したユーザーIDを生成しません）。
ユーザー名
ユーザー名は、我々はあなたにも、ランダムに生成された名前を使用することができ、自分の名前を入力する爆弾ボックスの訪問者によるアクセスを許可することができます。ここでは、あまりにも多くの技術的なポイントなし、説明することはありません。
ユーザのアバター
ヘッドが通過しない場合は、「それをおしゃべりする」ので、ここで私たちが使用する、デフォルトのアバターとして空白を使用しますが、綺麗ではないでしょうhttp://www.gravatar.comを。
グラバターを使用した後、我々はあなたが面白い画像を取得することができ、簡単なHTTPリクエストを必要とします。
http://www.gravatar.com/avatar/{hash}?s=256&d=identicon
- ハッシュ：塗りつぶしに乱数を生成します
- S：サイズ
- D：スタイル、現在のオプションidenticon、monsterid、wavatar、レトロ、 robohash など。具体的な見て公式ドキュメント
ハッシュ、我々はあなたが要求に渡されたハッシュとしてのuser_idができ、フロントはここで、user_idは重複しない場合があります生成しました。
S、サイズは、デフォルトのサイズはすることができ、渡すことはできません。
D、スタイルは、私は5つのスタイルを保存するために、配列を使用して、ランダムなスタイルを取得styleArray添字として乱数を使用して、[0-4]の乱数を使用している場合、ユーザーが作成した各時間。
chat_urlを生成します
上記の手順で、我々はweb_id、sso_key、user_idは、ユーザ名、アバターを取得します。タイムスタンプが取得することができます。今、私たちはのトークンを生成することができました。
トークンを作成します
公式文書によると、トークンは、SHA512暗号化した後、次のフィールドで構成される文字列を生成します。
webid_userid_当前时间戳_ssokey
私たちはフロントでトークンを生成することができませんので、個人情報に属しSSO_KEYので、このステップは、背景に引き渡されるべきです。バックエンド** createXianLiaoTokenを（書き込み）**インターフェース、フロントは現在のタイムスタンプとユーザIDを着信は、web_idとSSO_KEYサーバ上に格納することができます。
ここでは、私はJavaのデモを使用します。
Controller.java
/**
* 用于生成闲聊么 所需要的token信息
*/
@GetMapping("createXianLiaoToken")
public @ResponseBody String createXianLiaoToken(HttpServletRequest request) {
String uid = request.getParameter("uid");
String timestamp = request.getParameter("timestamp");
String str = WebConst.WEB_ID + "_" + uid + "_" + timestamp + "_" + WebConst.SSO_KEY;
try {
return Commons.SHA(str, "SHA-512");
} catch (Exception e) {
throw new TipException("系统异常, SHA-512加密失败.");
}
}
コモンズ＃SHA（オンライン多く、私はCSDNをコピー）
public static String SHA(final String strText, final String strType) {
// 返回值
String strResult = null;
// 是否是有效字符串
if (strText != null && strText.length() > 0) {
try {
// SHA 加密开始
// 创建加密对象 并傳入加密類型
MessageDigest messageDigest = MessageDigest
.getInstance(strType);
// 传入要加密的字符串
messageDigest.update(strText.getBytes());
// 得到 byte 類型结果
byte byteBuffer[] = messageDigest.digest();
// 將 byte 轉換爲 string
StringBuffer strHexString = new StringBuffer();
大专栏 闲聊么 // 遍歷 byte buffer
for (int i = 0; i < byteBuffer.length; i++) {
String hex = Integer.toHexString(0xff & byteBuffer[i]);
if (hex.length() == 1) {
strHexString.append('0');
}
strHexString.append(hex);
}
// 得到返回結果
strResult = strHexString.toString();
} catch (NoSuchAlgorithmException e) {
e.printStackTrace();
}
}
return strResult;
}
AJAX
// 从后台获取到与闲聊么通信的token
function getToken(xlm_uid, timestamp) {
var result = null;
$.ajax({
url: [[@{/createXianLiaoToken}]],
type: 'GET',
dataType: 'text',
contentType: 'application/json',
data: {'uid': xlm_uid, 'timestamp': timestamp},
async: false,
success: function(data){
result = data;
}
});
return result;
}
以上の動作により、我々は、我々は全体chat_url情報を組み立てるために始めることができ、トークンを得ました。
文書の公式サイトによると、chat_urlフォーマット：
https://xianliao.me/s/web_id?mobile=1&uid={登录用户的ID}&username={登录用户的用户名，需要做URI encode}&avatar={登录用户的头像URL，需要做URI encode}&ts={当前的Linux timestamp}&token={即xlm_hash，见下附的xlm_hash的生成方法}
私たちは、リンクを埋めるために一つずつ、上記の手順情報を取得し、その後、window.location.href = chat_urlなり、現在のページがモディページをチャットにリダイレクトされます。なぜチャットチャットインターフェイスを取得します。私の完全なフロントエンドコードで次の表情。
xianliaome.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>闲聊么</title>
<script th:src="@{//cdn.bootcss.com/jquery/2.2.3/jquery.min.js}"></script>
</head>
<body>
<script th:inline="javascript">
// thymeleaf 不能输入地址符,但是闲聊么api又不能识别转移后了的&,所以用CDATA包起来.
/*<![CDATA[*/
var ds = ['identicon', 'monsterid', 'wavatar', 'retro', 'robohash'];
// 初始化闲聊么需要的数据
function init() {
var web_id = 'xxxxxx';
var xlm_uid;
var xlm_name;
var xlm_avatar;
if (easyLocalStorage('xlm_uid') != null) {
xlm_uid = easyLocalStorage('xlm_uid');
xlm_name = easyLocalStorage('xlm_name');
xlm_avatar = easyLocalStorage('xlm_avatar');
}else {
xlm_uid = decodeURI(Math.seededRandom(Date.parse(new Date()), 1));
var name = prompt('请输入用户名').trim();
xlm_name = decodeURI(name === '' ? '匿名' : name);
xlm_avatar = decodeURI(avatarRandom(xlm_uid));
easyLocalStorage('xlm_uid', xlm_uid);
easyLocalStorage('xlm_name', xlm_name);
easyLocalStorage('xlm_avatar', xlm_avatar);
}
var timestamp = Date.parse(new Date());
var token = getToken(xlm_uid, timestamp);
window.location.href = "https://www.xianliao.me/s/" + web_id + "" +
"?mobile=1" +
"&uid=" + xlm_uid + "" +
"&username=" + xlm_name + "" +
"&avatar=" + xlm_avatar + "" +
"&ts=" + timestamp + "" +
"&token=" + token;
}
$(function () {
init()
})
// 从后台获取到与闲聊么通信的token
function getToken(xlm_uid, timestamp) {
var result = null;
$.ajax({
url: [[@{/createXianLiaoToken}]],
type: 'GET',
dataType: 'text',
contentType: 'application/json',
data: {'uid': xlm_uid, 'timestamp': timestamp},
async: false,
success: function(data){
result = data;
}
});
return result;
}
// 通过gravatar.com.随机获取一个有趣的用户头像
function avatarRandom(xlm_uid) {
var num = Math.floor(Math.random() * 4 + 1);
return 'http://www.gravatar.com/avatar/' + xlm_uid + '?d=' + ds[num];
}
// 对本地存储的建议封装
function easyLocalStorage(key, value) {
if (value == null || value.trim() === '') {
return localStorage.getItem(key);
}else {
localStorage.setItem(key, value);
}
return true;
}
// 获取一个随机数
Math.seed = 5;
Math.seededRandom = function(max, min) {
max = max || 1;
min = min || 0;
Math.seed = (Math.seed * 9301 + 49297) % 233280;
var rnd = Math.seed / 233280.0;
return Math.ceil( min + rnd * (max - min) ); // Math.ceil实现取整功能，可以根据需要取消取整
};
/*]]>*/
</script>
</body>
</html>
使い方
チュートリアルの上に、我々は我々が使用する必要がxianliaome.htmlページを持って、我々はインラインフレームを、現在のページにそれを埋め込むことができます。
これまでのところ、私たちは、匿名のチャットがそれをチャットが完了しました。
欠陥
- どのようなチャットページだことも問題ありません、我々はあなた自身のページをブロックします。
- 訪問者は、ユーザー名を入力する必要がある場合は、ユーザー名の入力ボックス爆弾をポップアップ表示されますページを開くしていないが、その後、非常に非友好的、チャットをクリックしてください
上記の欠点である、私は最適化していきます。完璧なまで。
長いブログ、レイアウトと説明を書くために初めて、読んでくれてありがとうは特に友好的ではありません。