huahaofeng
/
aspnetcore
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Introducing modules for the ts client

This commit is contained in:
moozzyk 2016-11-16 15:13:12 -08:00
parent 1b59fc6f80
commit 2039a18971
19 changed files with 404 additions and 350 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@ -35,7 +35,7 @@ node_modules/
*.nuget.props
*.nuget.targets
autobahnreports/
signalr-client.js
site.min.css
.idea/
.vscode/
signalr-client/

14
package.json
View File

@ -6,19 +6,27 @@
"directories": {
"test": "test"
},
"scripts": {},
"scripts": {
"gulp": "gulp"
},
"repository": {
"type": "git",
"url": "git+https://github.com/aspnet/SignalR.git"
},
"author": "Microsoft",
"license": "MIT",
"license": "Apache-2.0",
"bugs": {
"url": "https://github.com/aspnet/SignalR/issues"
},
"homepage": "https://github.com/aspnet/SignalR#readme",
"devDependencies": {
"browserify": "^13.1.1",
"del": "^2.2.2",
"gulp": "^3.9.1",
"jasmine": "^2.5.2"
"gulp-typescript": "^3.1.3",
"jasmine": "^2.5.2",
"typescript": "^2.0.10",
"vinyl-source-stream": "^1.1.0",
"yargs": "^6.4.0"
}
}

55
samples/ChatSample/Views/Home/Index.cshtml
View File

@ -2,34 +2,6 @@
ViewData["Title"] = "Chat";
}
<script src="~/js/signalr-client.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
let connection = new RpcConnection(`http://${document.location.host}/chat`, 'formatType=json&format=text');
connection.on('Send', function (message) {
var child = document.createElement('li');
child.innerText = message;
document.getElementById('messages').appendChild(child);
});
connection.start();
document.getElementById('sendmessage').addEventListener('submit', event => {
let data = document.getElementById('new-message').value;
connection.invoke('ChatSample.Hubs.Chat.Send', data, 'json').catch(err => {
var child = document.createElement('li');
child.style.color = 'red';
child.innerText = err;
document.getElementById('messages').appendChild(child);
});
event.preventDefault();
});
});
</script>
<div id="chat-area">
<ul id="messages"></ul>
<ul id="users"></ul>
@ -39,4 +11,29 @@
<input type="text" id="new-message" />
<input type="submit" id="send" value="Send" class="send" />
</form>
</div>
</div>
<script src="lib/signalr-client/signalr-client.js"></script>
<script>
let connection = new signalR.RpcConnection(`http://${document.location.host}/chat`, 'formatType=json&format=text');
connection.on('Send', function (message) {
var child = document.createElement('li');
child.innerText = message;
document.getElementById('messages').appendChild(child);
});
connection.start();
document.getElementById('sendmessage').addEventListener('submit', event => {
let data = document.getElementById('new-message').value;
connection.invoke('ChatSample.Hubs.Chat.Send', data, 'json').catch(err => {
var child = document.createElement('li');
child.style.color = 'red';
child.innerText = err;
document.getElementById('messages').appendChild(child);
});
event.preventDefault();
});
</script>

4
samples/ChatSample/project.json
View File

@ -91,7 +91,9 @@
},
"scripts": {
"precompile": [ "dotnet bundle", "tsc --project ../../src/Microsoft.AspNetCore.SignalR.Client.TS/ --out wwwroot/js/signalr-client.js" ],
"precompile": [ "dotnet bundle",
"npm install",
"npm run gulp -- --gulpfile %project:Directory%/../../src/Microsoft.AspNetCore.SignalR.Client.TS/gulpfile.js bundle-client --bundleOutDir %project:Directory%/wwwroot/lib/signalr-client/" ],
"prepublish": [ "bower install" ],
"postpublish": [ "dotnet publish-iis --publish-folder %publish:OutputPath% --framework %publish:FullTargetFramework%" ]
}

1
samples/ChatSample/wwwroot/_references.js
View File

@ -1,5 +1,4 @@
/// <autosync enabled="true" />
/// <reference path="js/signalr-client.js" />
/// <reference path="js/site.js" />
/// <reference path="lib/bootstrap/dist/js/bootstrap.js" />
/// <reference path="lib/jquery/dist/jquery.js" />

4
samples/SocketsSample/project.json
View File

@ -44,7 +44,9 @@
},
"scripts": {
"precompile": [ "tsc --project ../../src/Microsoft.AspNetCore.SignalR.Client.TS/ --out wwwroot/js/signalr-client.js" ],
"precompile": [
"npm install",
"npm run gulp -- --gulpfile %project:Directory%/../../src/Microsoft.AspNetCore.SignalR.Client.TS/gulpfile.js bundle-client --bundleOutDir %project:Directory%/wwwroot/lib/signalr-client/" ],
"postpublish": [ "dotnet publish-iis --publish-folder %publish:OutputPath% --framework %publish:FullTargetFramework%" ]
}
}

1
samples/SocketsSample/wwwroot/.gitignore vendored
View File

@ -1 +0,0 @@
js/

221
samples/SocketsSample/wwwroot/hubs.html
View File

@ -3,116 +3,6 @@
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/signalr-client.js"></script>
<script>
var isConnected = false;
function getParameterByName(name, url) {
if (!url) {
url = window.location.href;
}
name = name.replace(/[\[\]]/g, "\\$&");
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, " "));
}
function click(id, callback) {
document.getElementById(id).addEventListener('click', event => {
callback(event);
event.preventDefault();
});
}
function invoke(connection, method, ...args) {
if (!isConnected) {
return;
}
var argsArray = Array.prototype.slice.call(arguments);
connection.invoke.apply(connection, argsArray.slice(1))
.then(result => {
console.log("invocation completed successfully: " + (result === null ? '(null)' : result));
if (result) {
addLine(result);
}
})
.catch(err => {
addLine(err, 'red');
});
}
function getText(id) {
return document.getElementById(id).value;
}
document.addEventListener('DOMContentLoaded', () => {
let transport = getParameterByName('transport') || 'webSockets';
document.getElementById('head1').innerHTML = transport;
let connection = new RpcConnection(`http://${document.location.host}/hubs`, 'formatType=json&format=text');
connection.on('Send', msg => {
addLine(msg);
});
connection.connectionClosed = e => {
if (e) {
addLine('Connection closed with error: ' + e, 'red');
}
else {
addLine('Disconnected', 'green');
}
}
click('connect', event => {
connection.start(transport)
.then(() => {
isConnected = true;
addLine('Connected successfully', 'green');
})
.catch(err => {
addLine(err, 'red');
});
});
click('disconnect', event => {
connection.stop();
isConnected = false;
});
click('broadcast', event => {
let data = getText('msg');
invoke(connection, 'SocketsSample.Hubs.Chat.Send', data);
});
click('join-group', event => {
let groupName = getText('msg');
invoke(connection, 'SocketsSample.Hubs.Chat.JoinGroup', groupName);
});
click('leave-group', event => {
let groupName = getText('msg');
invoke(connection, 'SocketsSample.Hubs.Chat.LeaveGroup', groupName);
});
click('groupmsg', event => {
let groupName = getText('target');
let message = getText('message');
invoke(connection, 'SocketsSample.Hubs.Chat.SendToGroup', groupName, message);
});
});
function addLine(line, color) {
var child = document.createElement('li');
if (color) {
child.style.color = color;
}
child.innerText = line;
document.getElementById('messages').appendChild(child);
}
</script>
</head>
<body>
<h1 id="head1"></h1>
@ -160,4 +50,113 @@
<ul id="messages"></ul>
</body>
</html>
</html>
<script src="lib/signalr-client/signalr-client.js"></script>
<script>
var isConnected = false;
function getParameterByName(name, url) {
if (!url) {
url = window.location.href;
}
name = name.replace(/[\[\]]/g, "\\$&");
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, " "));
}
function click(id, callback) {
document.getElementById(id).addEventListener('click', event => {
callback(event);
event.preventDefault();
});
}
function invoke(connection, method, ...args) {
if (!isConnected) {
return;
}
var argsArray = Array.prototype.slice.call(arguments);
connection.invoke.apply(connection, argsArray.slice(1))
.then(result => {
console.log("invocation completed successfully: " + (result === null ? '(null)' : result));
if (result) {
addLine(result);
}
})
.catch(err => {
addLine(err, 'red');
});
}
function getText(id) {
return document.getElementById(id).value;
}
function addLine(line, color) {
var child = document.createElement('li');
if (color) {
child.style.color = color;
}
child.innerText = line;
document.getElementById('messages').appendChild(child);
}
let transport = getParameterByName('transport') || 'webSockets';
document.getElementById('head1').innerHTML = transport;
let connection = new signalR.RpcConnection(`http://${document.location.host}/hubs`, 'formatType=json&format=text');
connection.on('Send', msg => {
addLine(msg);
});
connection.connectionClosed = e => {
if (e) {
addLine('Connection closed with error: ' + e, 'red');
}
else {
addLine('Disconnected', 'green');
}
}
click('connect', event => {
connection.start(transport)
.then(() => {
isConnected = true;
addLine('Connected successfully', 'green');
})
.catch(err => {
addLine(err, 'red');
});
});
click('disconnect', event => {
connection.stop();
isConnected = false;
});
click('broadcast', event => {
let data = getText('msg');
invoke(connection, 'SocketsSample.Hubs.Chat.Send', data);
});
click('join-group', event => {
let groupName = getText('msg');
invoke(connection, 'SocketsSample.Hubs.Chat.JoinGroup', groupName);
});
click('leave-group', event => {
let groupName = getText('msg');
invoke(connection, 'SocketsSample.Hubs.Chat.LeaveGroup', groupName);
});
click('groupmsg', event => {
let groupName = getText('target');
let message = getText('message');
invoke(connection, 'SocketsSample.Hubs.Chat.SendToGroup', groupName, message);
});
</script>

4
src/Microsoft.AspNetCore.SignalR.Client.TS/Connection.ts
View File

@ -1,3 +1,5 @@
import { ITransport, WebSocketTransport, ServerSentEventsTransport, LongPollingTransport } from "./Transports"
import { HttpClient } from "./HttpClient"
enum ConnectionState {
Disconnected,
@ -5,7 +7,7 @@ enum ConnectionState {
Connected
}
class Connection {
export class Connection {
private connectionState: ConnectionState;
private url: string;
private queryString: string;

2
src/Microsoft.AspNetCore.SignalR.Client.TS/HttpClient.ts
View File

@ -1,4 +1,4 @@
class HttpClient {
export class HttpClient {
get(url: string): Promise<string> {
return this.xhr("GET", url);
}

7
src/Microsoft.AspNetCore.SignalR.Client.TS/ITransport.ts
View File

@ -1,7 +0,0 @@
interface ITransport {
connect(url: string, queryString: string): Promise<void>;
send(data: any): Promise<void>;
stop(): void;
onDataReceived: DataReceived;
onError: ErrorHandler;
}

70
src/Microsoft.AspNetCore.SignalR.Client.TS/LongPollingTransport.ts
View File

@ -1,70 +0,0 @@
class LongPollingTransport implements ITransport {
private url: string;
private queryString: string;
private pollXhr: XMLHttpRequest;
connect(url: string, queryString: string): Promise<void> {
this.url = url;
this.queryString = queryString;
this.poll(url + "/poll?" + this.queryString)
return Promise.resolve();
}
private poll(url: string): void {
let thisLongPollingTransport = this;
let pollXhr = new XMLHttpRequest();
pollXhr.onload = () => {
if (pollXhr.status == 200) {
if (thisLongPollingTransport.onDataReceived) {
thisLongPollingTransport.onDataReceived(pollXhr.response);
}
thisLongPollingTransport.poll(url);
}
else if (this.pollXhr.status == 204) {
// TODO: closed event?
}
else {
if (thisLongPollingTransport.onError) {
thisLongPollingTransport.onError({
status: pollXhr.status,
statusText: pollXhr.statusText
});
}
}
};
pollXhr.onerror = () => {
if (thisLongPollingTransport.onError) {
thisLongPollingTransport.onError({
status: pollXhr.status,
statusText: pollXhr.statusText
});
}
};
pollXhr.ontimeout = () => {
thisLongPollingTransport.poll(url);
}
this.pollXhr = pollXhr;
this.pollXhr.open("GET", url, true);
// TODO: consider making timeout configurable
this.pollXhr.timeout = 110000;
this.pollXhr.send();
}
send(data: any): Promise<void> {
return new HttpClient().post(this.url + "/send?" + this.queryString, data);
}
stop(): void {
if (this.pollXhr) {
this.pollXhr.abort();
this.pollXhr = null;
}
}
onDataReceived: DataReceived;
onError: ErrorHandler;
}

4
src/Microsoft.AspNetCore.SignalR.Client.TS/RpcConnection.ts
View File

@ -1,3 +1,5 @@
import { Connection } from "./Connection"
interface InvocationDescriptor {
readonly Id: string;
readonly Method: string;
@ -10,7 +12,7 @@ interface InvocationResultDescriptor {
readonly Result: any;
}
class RpcConnection {
export class RpcConnection {
private connection: Connection;
private callbacks: Map<string, (any) => void>;
private methods: Map<string, (...args:any[]) => void>;

61
src/Microsoft.AspNetCore.SignalR.Client.TS/ServerSentEventsTransport.ts
View File

@ -1,61 +0,0 @@
// TODO: need EvenSource typings
class ServerSentEventsTransport implements ITransport {
private eventSource: EventSource;
private url: string;
private queryString: string;
connect(url: string, queryString: string): Promise<void> {
if (typeof (EventSource) === "undefined") {
Promise.reject("EventSource not supported by the browser.")
}
this.queryString = queryString;
this.url = url;
let tmp = `${this.url}/sse?${this.queryString}`;
return new Promise((resolve, reject) => {
let eventSource = new EventSource(`${this.url}/sse?${this.queryString}`);
try {
let thisEventSourceTransport = this;
eventSource.onmessage = (e: MessageEvent) => {
if (thisEventSourceTransport.onDataReceived) {
thisEventSourceTransport.onDataReceived(e.data);
}
};
eventSource.onerror = (e: Event) => {
reject();
// don't report an error if the transport did not start successfully
if (thisEventSourceTransport.eventSource && thisEventSourceTransport.onError) {
thisEventSourceTransport.onError(e);
}
}
eventSource.onopen = () => {
thisEventSourceTransport.eventSource = eventSource;
resolve();
}
}
catch (e) {
return Promise.reject(e);
}
});
}
send(data: any): Promise<void> {
return new HttpClient().post(this.url + "/send?" + this.queryString, data);
}
stop(): void {
if (this.eventSource) {
this.eventSource.close();
this.eventSource = null;
}
}
onDataReceived: DataReceived;
onError: ErrorHandler;
}

199
src/Microsoft.AspNetCore.SignalR.Client.TS/Transports.ts Normal file
View File

@ -0,0 +1,199 @@
import { HttpClient } from "./HttpClient"
export interface ITransport {
connect(url: string, queryString: string): Promise<void>;
send(data: any): Promise<void>;
stop(): void;
onDataReceived: DataReceived;
onError: ErrorHandler;
}
export class WebSocketTransport implements ITransport {
private webSocket: WebSocket;
connect(url: string, queryString: string = ""): Promise<void> {
return new Promise((resolve, reject) => {
url = url.replace(/^http/, "ws");
let connectUrl = url + "/ws?" + queryString;
let webSocket = new WebSocket(connectUrl);
let thisWebSocketTransport = this;
webSocket.onopen = (event: Event) => {
console.log(`WebSocket connected to ${connectUrl}`);
thisWebSocketTransport.webSocket = webSocket;
resolve();
};
webSocket.onerror = (event: Event) => {
reject();
};
webSocket.onmessage = (message: MessageEvent) => {
console.log(`(WebSockets transport) data received: ${message.data}`);
if (thisWebSocketTransport.onDataReceived) {
thisWebSocketTransport.onDataReceived(message.data);
}
}
webSocket.onclose = (event: CloseEvent) => {
// webSocket will be null if the transport did not start successfully
if (thisWebSocketTransport.webSocket && event.wasClean === false) {
if (thisWebSocketTransport.onError) {
thisWebSocketTransport.onError(event);
}
}
}
});
}
send(data: any): Promise<void> {
if (this.webSocket && this.webSocket.readyState === WebSocket.OPEN) {
this.webSocket.send(data);
return Promise.resolve();
}
return Promise.reject("WebSocket is not in OPEN state");
}
stop(): void {
if (this.webSocket) {
this.webSocket.close();
this.webSocket = null;
}
}
onDataReceived: DataReceived;
onError: ErrorHandler;
}
export class ServerSentEventsTransport implements ITransport {
private eventSource: EventSource;
private url: string;
private queryString: string;
connect(url: string, queryString: string): Promise<void> {
if (typeof (EventSource) === "undefined") {
Promise.reject("EventSource not supported by the browser.")
}
this.queryString = queryString;
this.url = url;
let tmp = `${this.url}/sse?${this.queryString}`;
return new Promise((resolve, reject) => {
let eventSource = new EventSource(`${this.url}/sse?${this.queryString}`);
try {
let thisEventSourceTransport = this;
eventSource.onmessage = (e: MessageEvent) => {
if (thisEventSourceTransport.onDataReceived) {
thisEventSourceTransport.onDataReceived(e.data);
}
};
eventSource.onerror = (e: Event) => {
reject();
// don't report an error if the transport did not start successfully
if (thisEventSourceTransport.eventSource && thisEventSourceTransport.onError) {
thisEventSourceTransport.onError(e);
}
}
eventSource.onopen = () => {
thisEventSourceTransport.eventSource = eventSource;
resolve();
}
}
catch (e) {
return Promise.reject(e);
}
});
}
send(data: any): Promise<void> {
return new HttpClient().post(this.url + "/send?" + this.queryString, data);
}
stop(): void {
if (this.eventSource) {
this.eventSource.close();
this.eventSource = null;
}
}
onDataReceived: DataReceived;
onError: ErrorHandler;
}
export class LongPollingTransport implements ITransport {
private url: string;
private queryString: string;
private pollXhr: XMLHttpRequest;
connect(url: string, queryString: string): Promise<void> {
this.url = url;
this.queryString = queryString;
this.poll(url + "/poll?" + this.queryString)
return Promise.resolve();
}
private poll(url: string): void {
let thisLongPollingTransport = this;
let pollXhr = new XMLHttpRequest();
pollXhr.onload = () => {
if (pollXhr.status == 200) {
if (thisLongPollingTransport.onDataReceived) {
thisLongPollingTransport.onDataReceived(pollXhr.response);
}
thisLongPollingTransport.poll(url);
}
else if (this.pollXhr.status == 204) {
// TODO: closed event?
}
else {
if (thisLongPollingTransport.onError) {
thisLongPollingTransport.onError({
status: pollXhr.status,
statusText: pollXhr.statusText
});
}
}
};
pollXhr.onerror = () => {
if (thisLongPollingTransport.onError) {
thisLongPollingTransport.onError({
status: pollXhr.status,
statusText: pollXhr.statusText
});
}
};
pollXhr.ontimeout = () => {
thisLongPollingTransport.poll(url);
}
this.pollXhr = pollXhr;
this.pollXhr.open("GET", url, true);
// TODO: consider making timeout configurable
this.pollXhr.timeout = 110000;
this.pollXhr.send();
}
send(data: any): Promise<void> {
return new HttpClient().post(this.url + "/send?" + this.queryString, data);
}
stop(): void {
if (this.pollXhr) {
this.pollXhr.abort();
this.pollXhr = null;
}
}
onDataReceived: DataReceived;
onError: ErrorHandler;
}

58
src/Microsoft.AspNetCore.SignalR.Client.TS/WebSocketTransport.ts
View File

@ -1,58 +0,0 @@
class WebSocketTransport implements ITransport {
private webSocket: WebSocket;
connect(url: string, queryString: string = ""): Promise<void> {
return new Promise((resolve, reject) => {
url = url.replace(/^http/, "ws");
let connectUrl = url + "/ws?" + queryString;
let webSocket = new WebSocket(connectUrl);
let thisWebSocketTransport = this;
webSocket.onopen = (event: Event) => {
console.log(`WebSocket connected to ${connectUrl}`);
thisWebSocketTransport.webSocket = webSocket;
resolve();
};
webSocket.onerror = (event: Event) => {
reject();
};
webSocket.onmessage = (message: MessageEvent) => {
console.log(`(WebSockets transport) data received: ${message.data}`);
if (thisWebSocketTransport.onDataReceived) {
thisWebSocketTransport.onDataReceived(message.data);
}
}
webSocket.onclose = (event: CloseEvent) => {
// webSocket will be null if the transport did not start successfully
if (thisWebSocketTransport.webSocket && event.wasClean === false) {
if (thisWebSocketTransport.onError) {
thisWebSocketTransport.onError(event);
}
}
}
});
}
send(data: any): Promise<void> {
if (this.webSocket && this.webSocket.readyState === WebSocket.OPEN) {
this.webSocket.send(data);
return Promise.resolve();
}
return Promise.reject("WebSocket is not in OPEN state");
}
stop(): void {
if (this.webSocket) {
this.webSocket.close();
this.webSocket = null;
}
}
onDataReceived: DataReceived;
onError: ErrorHandler;
}

40
src/Microsoft.AspNetCore.SignalR.Client.TS/gulpfile.js Normal file
View File

@ -0,0 +1,40 @@
const gulp = require('gulp');
const browserify = require('browserify');
const ts = require('gulp-typescript');
const source = require('vinyl-source-stream');
const del = require('del');
const argv = require('yargs').argv;
const tsProject = ts.createProject('./tsconfig.json');
const clientOutDir = tsProject.options.outDir;
gulp.task('clean', () => {
return del([clientOutDir + '/..'], { force: true });
});
gulp.task('compile-ts-client', () => {
return tsProject.src()
.pipe(tsProject())
.pipe(gulp.dest(clientOutDir));
});
gulp.task('browserify-client', ['compile-ts-client'], () => {
return browserify(clientOutDir + '/RpcConnection.js', {standalone: 'signalR'})
.bundle()
.pipe(source('signalr-client.js'))
.pipe(gulp.dest(clientOutDir + '/../signalr-client-bundle'));
});
gulp.task('build-ts-client', ['clean', 'compile-ts-client', 'browserify-client']);
gulp.task('bundle-client', ['build-ts-client'], () => {
if (!argv.bundleOutDir) {
console.log('Use \'--bundleOutDir\' option to specify the target file for the bundled client.');
}
else {
return gulp.src(clientOutDir + '/../signalr-client-bundle/signalr-client.js')
.pipe(gulp.dest(argv.bundleOutDir));
}
});
gulp.task('default', ['build-ts-client']);

5
src/Microsoft.AspNetCore.SignalR.Client.TS/tsconfig.json
View File

@ -1,8 +1,9 @@
{
"compileOnSave": true,
"compilerOptions": {
"module": "umd",
"target": "es6",
"out": "../../samples/SocketsSample/wwwroot/js/signalr-client.js"
"outDir": "../../artifacts/lib/signalr-client-modules"
},
"include": [ "*.ts" ]
}
}

2
test/Microsoft.AspNetCore.SignalR.Test.Server/project.json
View File

@ -39,7 +39,7 @@
},
"scripts": {
"precompile": [ "npm install", "gulp copy-jasmine"],
"precompile": [ "npm install", "npm run gulp -- --gulpfile %project:Directory%/gulpfile.js copy-jasmine"],
"postpublish": [ "dotnet publish-iis --publish-folder %publish:OutputPath% --framework %publish:FullTargetFramework%" ]
}
}