Skip to content

* 调整结构，增加 NodeJS 支持，增加 npm 支持 #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

* 调整结构，增加 NodeJS 支持，增加 npm 支持 #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
.idea
./node_modules
219 changes: 219 additions & 0 deletions example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,219 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Yunba JavaScript Over Socket.IO Demo</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<style>
input { height: 30px; font-weight: bold; }
.green { color: green; }
fieldset { margin-top: 20px; }
b { margin-left: 10px; }
.clear { clear: both; }
</style>
</head>
<body>
<div style="float:left;width:50%">
<fieldset style="height:100px;">
<legend>WebSocket Info</legend>
<div id="msg"></div>
</fieldset>
</div>
<div style="float:left;width:50%">
<fieldset style="height:100px;">
<legend>Connect & Disconnect</legend>
<div id="connect_status"></div>
<input type="button" value="Connect" onclick="mqtt_connect();"/>
<input type="button" value="Disconnect" onclick="mqtt_disconnect();"/>
</fieldset>
</div>
<div class="clear"></div>
<fieldset>
<legend>Subscribe & Unsubscribe</legend>
<input type="text" placeholder="输入频道..." id="topic_sub"/>
<input type="button" value="Subscribe" onclick="mqtt_subscribe();"/>
<input type="button" value="Unsubscribe" onclick="mqtt_unsubscribe();"/>
<br/>

<div style="float:left;width:50%;">
<fieldset id="topic_list" style="height:200px;overflow:auto">
<legend>已订阅频道:</legend>
</fieldset>
</div>
<div style="float:left;width:50%;">
<fieldset style="height:200px;">
<legend>收到消息</legend>
<div id="msg_list" style="Overflow-y:scroll;height:180px;">
<div id="msg_end" style="height:0px; overflow:hidden"></div>
</div>
</fieldset>
</div>
</fieldset>
<fieldset>
<legend>按频道发布</legend>
频道：<input type="text" placeholder="输入频道..." id="topic_pub"/>
消息：<input type="text" placeholder="随便输入点什么..." id="message" style="width:300px;"/>

<input type="button" value="Publish" onclick="mqtt_publish();"/>
</fieldset>
<fieldset>
<legend>别名</legend>
别名(Alias): <input type="text" placeholder="输入alias..." id="alias_set"/>

<input type="button" value="Set Alias" onclick="set_alias();"/>
<input type="button" value="Get Alias" onclick="get_alias();"/>
</fieldset>
<fieldset>
<legend>按别名发布</legend>
别名(Alias): <input type="text" placeholder="输入alias..." id="alias_pub"/>
消息 <input type="text" placeholder="输入消息..." id="alias_message" style="..."/>

<input type="button" value="Publish" onclick="mqtt_publish_by_alias();"/>
</fieldset>
<script type="text/javascript" src="http://cdn.staticfile.org/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.staticfile.org/socket.io/0.9.16/socket.io.min.js"></script>
<script type="text/javascript" src="./yunba.js"></script>
<script type="text/javascript">
var yunba;
function mqtt_connect() {
yunba.connect(function (success, msg) {
if (success) {
$('#connect_status').html('Connected Success !');
$('#connect_status').css('color', 'green');
} else {
alert(msg);
}
});
};

function mqtt_disconnect() {
yunba.disconnect(function (success, msg) {
if (success) {
$('#connect_status').html('Disconnected Success !');
$('#connect_status').css('color', 'red');
} else {
alert(msg);
}
});
};

function mqtt_subscribe() {
if ($('#topic_sub').val() == '') {
alert('请输入频道！');
return false;
}
var topic = $('#topic_sub').val();
yunba.subscribe({'topic': topic }, function (success, msg) {
if (success) {
$('#topic_list').append('<b id="topic_id_' + topic + '">' + topic + '</b>');
} else {
alert(msg);
}
});
};

function mqtt_unsubscribe() {

if ($('#topic_sub').val() == '') {
alert('请输入频道！');
return false;
}
var topic = $('#topic_sub').val();

yunba.unsubscribe({'topic': topic}, function (success, data) {
if (success) {
$('#topic_id_' + topic).remove();
} else {
alert(data);
}
});
};

function mqtt_publish() {
if ($('#topic_pub').val() == '') {
alert('请输入频道！');
return false;
}
var topic = $('#topic_pub').val();
var message = $('#message').val();

yunba.publish({'topic': topic, 'msg': message}, function (success, msg) {
if (success) {

} else {
alert(msg);
}
});
};

function mqtt_publish_by_alias() {
if ($('#alias_pub').val() == '') {
alert('请输入别名');
return false;
}
var alias = $('#alias_pub').val();
var message = $('#alias_message').val();

yunba.publish_to_alias({'alias': alias, 'msg': message}, function (success, msg) {
if (!success) {
alert(msg);
}
})
};

function set_alias() {
if ($('#alias_set').val() == '') {
alert('请输入别名');
return false;
}

var alias = $('#alias_set').val();

yunba.set_alias({'alias': alias}, function (success, msg) {
if (success) {
console.log('set alias succ');
alert('set alias succ');
} else {
alert(msg);
}
})
};

function get_alias() {
yunba.get_alias( function(data) {
console.log('get alias succ');
$('#msg_end').before('get alias：' + data.alias);
$('#msg_end').before("\<br\/\>");
msg_end.scrollIntoView();
})
};

// 窗口加载完成后初始化云巴
$(window).load(function() {
yunba = new Yunba({
server: 'sock.yunba.io',
port: 3000,
appkey: '52fcc04c4dc903d66d6f8f92'}
);
yunba.init(function (success) {
if (success) {
$('#msg').html('<div style="color:green">已连接上 socket</div>');
$('#msg').append('<div style="color:green">SocketId: ' + yunba.socket.socket.sessionid) + '</div>';

mqtt_connect();
}
});

yunba.set_message_cb (function (data) {
$('#msg_end').before('来自频道：' + data.topic);
$('#msg_end').before('&nbsp;&nbsp;&nbsp;消息内容：' + data.msg);
$('#msg_end').before("\<br\/\>");
msg_end.scrollIntoView();
});
});
// 监听关闭浏览器窗口时要断开mqtt连接
$(window).on('beforeunload', function() {
yunba.disconnect();
});
</script>
</body>
<html>
5 changes: 0 additions & 5 deletions examples/javascripts/jquery-1.10.2.min.js
View file
Open in desktop

This file was deleted.

Loading