Question

我正在使用FRONT-END的Angular2 webapp项目和BACK-END的Vertex3。

使用Sockjs-client我正在创建websocket（在客户端）以在前端和后端之间创建一个通信通道。

我使用npm安装了sockjs-client：

npm install sockjs-client

当我在LoginService.ts文件中导入sockjs-client时：

从'sockjs-client'导入*作为SockJS;

GameScene.sks

使用

运行angular2 webapp项目时没有错误

npm运行服务器

但是在客户端没有创建websocket连接。因为我已经使用顶点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); } } }（托管在http://localhost:8082上）创建了服务器。

所以我有两个问题：

1.无法在angular2 webapp中导入sockjs-client，因此无法创建websocket连接。

2.构建angular2 webapp项目时出错，因为'sockjs-client'在node_modules中找不到（奇怪的是它存在于node_modules中）

有什么我想念的吗？

先谢谢!!!

Answer 1

找到了一种在不使用typings的情况下将sockjs集成在angular2中的方法。

使用以下步骤：

在sockjs-event.js
中导入sockjs-client.js和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>

创建导出服务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;

在我的情况下转到您的起始模块app.module.ts并在角度引导程序中加载您的服务myapp.service.ts

      import { AppComponent } from './app.component';
      ....
      import { ConsoleService } from 'services/myapp.service';

        @NgModule({
          imports: [
            ....
          ],
        providers:    [ ConsoleService ],

      declarations: [
          AppComponent,
        ...
       ],
         bootstrap: [AppComponent]
     })

4.从您的起始组件app.component.ts
打开websocket

      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();
       }

  }

最后，您可以使用导入EventBus在任何publish文件中使用registerHandler到.ts和ConsoleService。

我希望这会有所帮助：）

在angular2 webapp项目中使用sockjs-client / sockjs创建Websocket

1 个答案: