Making test and samples IE/ES5 aware

This commit is contained in:
Pawel Kadluczka 2017-08-28 17:05:49 -07:00 committed by Pawel Kadluczka
parent 2a36aa141d
commit 66876aa2f8
6 changed files with 87 additions and 36 deletions

View File

@ -8,8 +8,21 @@
<script type="text/javascript" src="lib/jasmine/jasmine.js"></script> <script type="text/javascript" src="lib/jasmine/jasmine.js"></script>
<script type="text/javascript" src="lib/jasmine/jasmine-html.js"></script> <script type="text/javascript" src="lib/jasmine/jasmine-html.js"></script>
<script type="text/javascript" src="lib/jasmine/boot.js"></script> <script type="text/javascript" src="lib/jasmine/boot.js"></script>
<script type="text/javascript" src="lib/signalr/signalr-clientES5.min.js"></script> <script type="text/javascript">
<script type="text/javascript" src="lib/signalr/signalr-msgpackprotocolES5.min.js"></script> if (typeof Promise === 'undefined')
{
document.write(
'<script type="text/javascript" src="lib/signalr/signalr-clientES5.min.js"><\/script>' +
'<script type="text/javascript" src="lib/signalr/signalr-msgpackprotocolES5.min.js"><\/script>');
}
else
{
document.write(
'<script type="text/javascript" src="lib/signalr/signalr-client.min.js"><\/script>' +
'<script type="text/javascript" src="lib/signalr/signalr-msgpackprotocol.min.js"><\/script>');
}
</script>
<script src="js/common.js"></script> <script src="js/common.js"></script>
<script src="js/webSocketTests.js"></script> <script src="js/webSocketTests.js"></script>
<script src="js/connectionTests.js"></script> <script src="js/connectionTests.js"></script>

View File

@ -28,7 +28,10 @@
</ItemGroup> </ItemGroup>
<Target Name="CopyTSClient" BeforeTargets="AfterBuild"> <Target Name="CopyTSClient" BeforeTargets="AfterBuild">
<Copy SourceFiles="$(MSBuildThisFileDirectory)..\..\client-ts\dist\browser\signalr-client.js" DestinationFolder="$(MSBuildThisFileDirectory)wwwroot\lib\signalr-client" /> <ItemGroup>
<SignalRJSClientFiles Include="$(MSBuildThisFileDirectory)..\..\client-ts\dist\browser\*" />
</ItemGroup>
<Copy SourceFiles="@(SignalRJSClientFiles)" DestinationFolder="$(MSBuildThisFileDirectory)wwwroot\lib\signalr-client" />
</Target> </Target>
</Project> </Project>

View File

@ -49,24 +49,37 @@
<ul id="message-list"></ul> <ul id="message-list"></ul>
</body> </body>
</html> </html>
<script src="lib/signalr-client/signalr-client.js"></script> <script type="text/javascript">
if (typeof Promise === 'undefined')
{
document.write(
'<script type="text/javascript" src="lib/signalr-client/signalr-clientES5.js"><\/script>' +
'<script type="text/javascript" src="lib/signalr-client/signalr-msgpackprotocolES5.js"><\/script>');
}
else
{
document.write(
'<script type="text/javascript" src="lib/signalr-client/signalr-client.js"><\/script>' +
'<script type="text/javascript" src="lib/signalr-client/signalr-msgpackprotocol.js"><\/script>');
}
</script>
<script src="utils.js"></script> <script src="utils.js"></script>
<script> <script>
var isConnected = false; var isConnected = false;
function invoke(connection, method, ...args) { function invoke(connection, method) {
if (!isConnected) { if (!isConnected) {
return; return;
} }
var argsArray = Array.prototype.slice.call(arguments); var argsArray = Array.prototype.slice.call(arguments);
connection.invoke.apply(connection, argsArray.slice(1)) connection.invoke.apply(connection, argsArray.slice(1))
.then(result => { .then(function(result) {
console.log("invocation completed successfully: " + (result === null ? '(null)' : result)); console.log("invocation completed successfully: " + (result === null ? '(null)' : result));
if (result) { if (result) {
addLine('message-list', result); addLine('message-list', result);
} }
}) })
.catch(err => { .catch(function(err) {
addLine('message-list', err, 'red'); addLine('message-list', err, 'red');
}); });
} }
@ -87,17 +100,17 @@ let disconnectButton = document.getElementById('disconnect');
disconnectButton.disabled = true; disconnectButton.disabled = true;
var connection; var connection;
click('connect', event => { click('connect', function(event) {
connectButton.disabled = true; connectButton.disabled = true;
disconnectButton.disabled = false; disconnectButton.disabled = false;
console.log(`http://${document.location.host}/${hubRoute}`); console.log('http://' + document.location.host + '/' + hubRoute);
let http = new signalR.HttpConnection(`http://${document.location.host}/${hubRoute}`, { transport: transportType, logger: logger }); let http = new signalR.HttpConnection('http://' + document.location.host + '/' + hubRoute, { transport: transportType, logger: logger });
connection = new signalR.HubConnection(http, logger); connection = new signalR.HubConnection(http, logger);
connection.on('Send', msg => { connection.on('Send', function(msg) {
addLine('message-list', msg); addLine('message-list', msg);
}); });
connection.onClosed = e => { connection.onClosed = function(e) {
if (e) { if (e) {
addLine('message-list', 'Connection closed with error: ' + e, 'red'); addLine('message-list', 'Connection closed with error: ' + e, 'red');
} }
@ -107,46 +120,46 @@ click('connect', event => {
} }
connection.start() connection.start()
.then(() => { .then(function() {
isConnected = true; isConnected = true;
addLine('message-list', 'Connected successfully', 'green'); addLine('message-list', 'Connected successfully', 'green');
}) })
.catch(err => { .catch(function(err) {
addLine('message-list', err, 'red'); addLine('message-list', err, 'red');
}); });
}); });
click('disconnect', event => { click('disconnect', function(event) {
connectButton.disabled = false; connectButton.disabled = false;
disconnectButton.disabled = true; disconnectButton.disabled = true;
connection.stop() connection.stop()
.then(() => { .then(function() {
isConnected = false; isConnected = false;
}); });
}); });
click('broadcast', event => { click('broadcast', function(event) {
let data = getText('message-text'); let data = getText('message-text');
invoke(connection, 'Send', data); invoke(connection, 'Send', data);
}); });
click('join-group', event => { click('join-group', function(event) {
let groupName = getText('message-text'); let groupName = getText('message-text');
invoke(connection, 'JoinGroup', groupName); invoke(connection, 'JoinGroup', groupName);
}); });
click('leave-group', event => { click('leave-group', function(event) {
let groupName = getText('message-text'); let groupName = getText('message-text');
invoke(connection, 'LeaveGroup', groupName); invoke(connection, 'LeaveGroup', groupName);
}); });
click('groupmsg', event => { click('groupmsg', function(event) {
let groupName = getText('target'); let groupName = getText('target');
let message = getText('private-message-text'); let message = getText('private-message-text');
invoke(connection, 'SendToGroup', groupName, message); invoke(connection, 'SendToGroup', groupName, message);
}); });
click('send', event => { click('send', function(event) {
let data = getText('me-message-text'); let data = getText('me-message-text');
invoke(connection, 'Echo', data); invoke(connection, 'Echo', data);
}); });

View File

@ -13,32 +13,41 @@
</form> </form>
<ul id="messages"></ul> <ul id="messages"></ul>
<script src="lib/signalr-client/signalr-client.js"></script> <script type="text/javascript">
if (typeof Promise === 'undefined')
{
document.write('<script type="text/javascript" src="lib/signalr-client/signalr-clientES5.js"><\/script>');
}
else
{
document.write('<script type="text/javascript" src="lib/signalr-client/signalr-client.js"><\/script>');
}
</script>
<script src="utils.js"></script> <script src="utils.js"></script>
<script> <script>
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', function() {
let transportType = signalR.TransportType[getParameterByName('transport')] || signalR.TransportType.WebSockets; let transportType = signalR.TransportType[getParameterByName('transport')] || signalR.TransportType.WebSockets;
document.getElementById('transportName').innerHTML = signalR.TransportType[transportType]; document.getElementById('transportName').innerHTML = signalR.TransportType[transportType];
let url = `http://${document.location.host}/chat` let url = 'http://' + document.location.host + '/chat';
let connection = new signalR.HttpConnection(url, { transport: transportType, logger: new signalR.ConsoleLogger(signalR.LogLevel.Information) }); let connection = new signalR.HttpConnection(url, { transport: transportType, logger: new signalR.ConsoleLogger(signalR.LogLevel.Information) });
connection.onDataReceived = data => { connection.onDataReceived = function(data) {
let child = document.createElement('li'); let child = document.createElement('li');
child.innerText = data; child.innerText = data;
document.getElementById('messages').appendChild(child); document.getElementById('messages').appendChild(child);
}; };
document.getElementById('sendmessage').addEventListener('submit', event => { document.getElementById('sendmessage').addEventListener('submit', function(event) {
let data = document.getElementById('data').value; let data = document.getElementById('data').value;
connection.send(data); connection.send(data);
event.preventDefault(); event.preventDefault();
}); });
connection.start().then(() => { connection.start().then(function() {
console.log("Opened"); console.log("Opened");
}, () => { }, function() {
console.log("Error opening connection"); console.log("Error opening connection");
}); });
}); });

View File

@ -23,10 +23,23 @@
<ul id="resultsList"></ul> <ul id="resultsList"></ul>
<ul id="messages"></ul> <ul id="messages"></ul>
<script src="lib/signalr-client/signalr-client.js"></script> <script type="text/javascript">
if (typeof Promise === 'undefined')
{
document.write(
'<script type="text/javascript" src="lib/signalr-client/signalr-clientES5.js"><\/script>' +
'<script type="text/javascript" src="lib/signalr-client/signalr-msgpackprotocolES5.js"><\/script>');
}
else
{
document.write(
'<script type="text/javascript" src="lib/signalr-client/signalr-client.js"><\/script>' +
'<script type="text/javascript" src="lib/signalr-client/signalr-msgpackprotocol.js"><\/script>');
}
</script>
<script src="utils.js"></script> <script src="utils.js"></script>
<script> <script>
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', function() {
let resultsList = document.getElementById('resultsList'); let resultsList = document.getElementById('resultsList');
let channelButton = document.getElementById('channelButton'); let channelButton = document.getElementById('channelButton');
let observableButton = document.getElementById('observableButton'); let observableButton = document.getElementById('observableButton');
@ -42,7 +55,7 @@
document.getElementById('transportName').innerHTML = signalR.TransportType[transportType]; document.getElementById('transportName').innerHTML = signalR.TransportType[transportType];
let url = `http://${document.location.host}/streaming` let url = 'http://' + document.location.host + '/streaming';
let connection = null; let connection = null;
click('clearButton', function () { click('clearButton', function () {
@ -87,17 +100,17 @@
function run(method) { function run(method) {
let id = invocationCounter; let id = invocationCounter;
invocationCounter += 1; invocationCounter += 1;
addLine('resultsList', `running ${method}(${id}) ...`); addLine('resultsList', 'running ' + method + '(' + id + ') ...');
connection.stream(method, 10, (Math.random() * 5) * 200).subscribe({ connection.stream(method, 10, (Math.random() * 5) * 200).subscribe({
closed: false, closed: false,
next: function (item) { next: function (item) {
addLine('resultsList', `${method}(${id}): ${item}`); addLine('resultsList', method + '(' + id + '): ' + item);
}, },
error: function (err) { error: function (err) {
addLine('resultsList', `${method}(${id}): ${err}`, 'red'); addLine('resultsList', method + '(' + id + '):' + err, 'red');
}, },
complete: function () { complete: function () {
addLine('resultsList', `${method}(${id}): complete`, 'green'); addLine('resultsList', method + '(' + id + '): complete', 'green');
} }
}); });
} }

View File

@ -11,7 +11,7 @@ function getParameterByName(name, url) {
} }
function click(id, callback) { function click(id, callback) {
document.getElementById(id).addEventListener('click', event => { document.getElementById(id).addEventListener('click', function (event) {
callback(event); callback(event);
event.preventDefault(); event.preventDefault();
}); });