在 angular2 webapp 项目中使用 sockjs-client/sockjs 创建 Websocket
Websocket creation using sockjs-client/sockjs in angular2 webapp project
我在前端使用 Angular2 webapp 项目,在后端使用 Vertex3。
我正在使用 Sockjs-client 创建 websocket(在客户端)以创建前端和后端之间的通信通道。
我已经使用 npm 安装了 sockjs-client :
npm install sockjs-client
当我在 LoginService.ts 文件中导入 sockjs-client 时:
import * as SockJS from 'sockjs-client';
export class LoginService {
URL: string = 'http://localhost:8082/eventbus';
sock: SockJS;
handlers = {};
private _opened: boolean = false;
public open(): void {
if (!this._opened) {
this.sock = new SockJS(this.URL);
this.sock.onopen = (e) => {
this.callHandlers('open', e);
}
this.sock.onmessage = (e) => {
this.messageReceived(e);
}
this.sock.onclose = (e) => {
this.callHandlers('close', e);
}
this._opened = true;
}
public isOpen(): boolean {
return this._opened;
}
public close(): void {
if (this._opened) {
this.sock.close();
delete this.sock;
this._opened = false;
}
}
private messageReceived (e) {
var msg = JSON.parse(e.data);
this.callHandlers('message', msg.type, msg.originator, msg.data);
}
private callHandlers (type: string, ...params: any[]) {
if (this.handlers[type]) {
this.handlers[type].forEach(function(cb) {
cb.apply(cb, params);
});
}
}
public send (type: string, data: any) {
if (this._opened) {
var msg = JSON.stringify({
type: type,
data: data
});
this.sock.send(msg);
}
}
}
使用
运行 angular2 webapp 项目时没有错误
npm run server
但是没有在客户端创建 websocket 连接。因为我已经使用顶点 vertex.createHttpServer
创建了服务器(托管在:http://localhost:8082)。
所以我有两个问题:
1.Unable 在 angular2 webapp 中导入 sockjs-client,所以无法创建 websocket 连接。
2.Error 在构建 angular2 webapp 项目时 'sockjs-client' 在 node_modules 中找不到(奇怪的是它存在于 node_modules )
有什么我遗漏的吗?
提前致谢!!!
找到了一种在不使用 typings
的情况下将 sockjs 集成到 angular2 中的方法。
使用以下步骤:
- Import
sockjs-event.js
and sockjs-client.js
in index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>MyApp</title>
<script src="/sockjs-client.js"></script>
<script src="/sockjs-event.js"> </script>
......
</head>
<body>
<my-app>Loading...</my-app>
</body>
</html>
- Create an export Service
myapp.service.ts
declare var EventBus: any;
@Injectable()
export class ConsoleService {
URL: string = 'http://localhost:8082/eventbus';
handlers = {};
eventBus: any;
private _opened: boolean = false;
public open(): void {
if (!this._opened) {
this.eventBus = new EventBus(this.URL);
this.eventBus.onopen = (e) => {
this._opened = true;
console.log("open connection");
this.callHandlers('open', e);
this.eventBus.publish("http://localhost:8082", "USER LOGIN INFO");
this.eventBus.registerHandler("http://localhost:8081/pushNotification", function (error, message) {
console.log(message.body);
//$("<div title='Basic dialog'>Test message</div>").dialog();
});
}
this.eventBus.onclose = (e) => {
this.callHandlers('close', e);
}
}
}
public isOpen(): boolean {
return this._opened;
}
public close(): void {
if (this._opened) {
this.eventBus.close();
delete this.eventBus;
this._opened = false;
}
}
.......
public send (type: string, data: any) {
if (this._opened) {
var msg = JSON.stringify({
type: type,
data: data
});
this.eventBus.publish("http://localhost:8082",msg);
}
}
};
export default ConsoleService;
- Go to your starting module in my case it is
app.module.ts
and load your service myapp.service.ts
in angular bootstrap
import { AppComponent } from './app.component';
....
import { ConsoleService } from 'services/myapp.service';
@NgModule({
imports: [
....
],
providers: [ ConsoleService ],
declarations: [
AppComponent,
...
],
bootstrap: [AppComponent]
})
4.Call open websocket from your starting component app.component.ts
import { Component } from '@angular/core';
import 'style/app.scss';
import { ConsoleService } from 'services/globalConsole.service';
@Component({
selector: 'my-app', // <my-app></my-app>
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
constructor (private consoleService: ConsoleService) {
consoleService.onOpen((e) => {
consoleService.send('message', "xyz");
});
consoleService.open();
}
}
- Finally you can use
EventBus
to publish
and registerHandler
in any .ts
file using import ConsoleService
.
希望对您有所帮助:)
我在前端使用 Angular2 webapp 项目,在后端使用 Vertex3。
我正在使用 Sockjs-client 创建 websocket(在客户端)以创建前端和后端之间的通信通道。
我已经使用 npm 安装了 sockjs-client :
npm install sockjs-client
当我在 LoginService.ts 文件中导入 sockjs-client 时:
import * as SockJS from 'sockjs-client';
export class LoginService {
URL: string = 'http://localhost:8082/eventbus';
sock: SockJS;
handlers = {};
private _opened: boolean = false;
public open(): void {
if (!this._opened) {
this.sock = new SockJS(this.URL);
this.sock.onopen = (e) => {
this.callHandlers('open', e);
}
this.sock.onmessage = (e) => {
this.messageReceived(e);
}
this.sock.onclose = (e) => {
this.callHandlers('close', e);
}
this._opened = true;
}
public isOpen(): boolean {
return this._opened;
}
public close(): void {
if (this._opened) {
this.sock.close();
delete this.sock;
this._opened = false;
}
}
private messageReceived (e) {
var msg = JSON.parse(e.data);
this.callHandlers('message', msg.type, msg.originator, msg.data);
}
private callHandlers (type: string, ...params: any[]) {
if (this.handlers[type]) {
this.handlers[type].forEach(function(cb) {
cb.apply(cb, params);
});
}
}
public send (type: string, data: any) {
if (this._opened) {
var msg = JSON.stringify({
type: type,
data: data
});
this.sock.send(msg);
}
}
}
使用
运行 angular2 webapp 项目时没有错误npm run server
但是没有在客户端创建 websocket 连接。因为我已经使用顶点 vertex.createHttpServer
创建了服务器(托管在:http://localhost:8082)。
所以我有两个问题:
1.Unable 在 angular2 webapp 中导入 sockjs-client,所以无法创建 websocket 连接。
2.Error 在构建 angular2 webapp 项目时 'sockjs-client' 在 node_modules 中找不到(奇怪的是它存在于 node_modules )
有什么我遗漏的吗?
提前致谢!!!
找到了一种在不使用 typings
的情况下将 sockjs 集成到 angular2 中的方法。
使用以下步骤:
- Import
sockjs-event.js
andsockjs-client.js
inindex.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>MyApp</title>
<script src="/sockjs-client.js"></script>
<script src="/sockjs-event.js"> </script>
......
</head>
<body>
<my-app>Loading...</my-app>
</body>
</html>
- Create an export Service
myapp.service.ts
declare var EventBus: any;
@Injectable()
export class ConsoleService {
URL: string = 'http://localhost:8082/eventbus';
handlers = {};
eventBus: any;
private _opened: boolean = false;
public open(): void {
if (!this._opened) {
this.eventBus = new EventBus(this.URL);
this.eventBus.onopen = (e) => {
this._opened = true;
console.log("open connection");
this.callHandlers('open', e);
this.eventBus.publish("http://localhost:8082", "USER LOGIN INFO");
this.eventBus.registerHandler("http://localhost:8081/pushNotification", function (error, message) {
console.log(message.body);
//$("<div title='Basic dialog'>Test message</div>").dialog();
});
}
this.eventBus.onclose = (e) => {
this.callHandlers('close', e);
}
}
}
public isOpen(): boolean {
return this._opened;
}
public close(): void {
if (this._opened) {
this.eventBus.close();
delete this.eventBus;
this._opened = false;
}
}
.......
public send (type: string, data: any) {
if (this._opened) {
var msg = JSON.stringify({
type: type,
data: data
});
this.eventBus.publish("http://localhost:8082",msg);
}
}
};
export default ConsoleService;
- Go to your starting module in my case it is
app.module.ts
and load your servicemyapp.service.ts
in angular bootstrap
import { AppComponent } from './app.component';
....
import { ConsoleService } from 'services/myapp.service';
@NgModule({
imports: [
....
],
providers: [ ConsoleService ],
declarations: [
AppComponent,
...
],
bootstrap: [AppComponent]
})
4.Call open websocket from your starting component
app.component.ts
import { Component } from '@angular/core';
import 'style/app.scss';
import { ConsoleService } from 'services/globalConsole.service';
@Component({
selector: 'my-app', // <my-app></my-app>
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
constructor (private consoleService: ConsoleService) {
consoleService.onOpen((e) => {
consoleService.send('message', "xyz");
});
consoleService.open();
}
}
- Finally you can use
EventBus
topublish
andregisterHandler
in any.ts
file using importConsoleService
.
希望对您有所帮助:)