我创建了一个vert.x Verticle，它定期将股票价格发布到事件总线“ stock.price.event.bus”。该Vertex工作正常，并且在启动时正在发送股票价格（作为json）到事件总线地址“ stock.price.event.bus”。
我有angular-6 UI项目，我需要在其中创建实时数据屏幕（反应式），并且此股票价格json应该显示在Angular-6 UI上。 Angular-6用户界面应订阅此vertx事件总线，用户界面屏幕应在5秒钟后定期刷新数据。
角度UI URL-http://localhost:4200/
Vertx Java后端服务-http://localhost:8080
同时启动了UI和后端服务
访问localhost：4200时
出错 HTTP404：未找到-服务器未找到与请求的URI（统一资源标识符）匹配的任何内容。 （XHR）GET-http://localhost:8080/eventbus/info?t=1554681653888 。***
-主Verticle代码，正在部署StockPriceWebSocketVerticle
package com.amit.vertx.MyVertxProject;
import io.vertx.core.AbstractVerticle;
import io.vertx.core.Vertx;
public class MainClass extends AbstractVerticle
{
public static void main( String[] args )
{
Vertx vertx = Vertx.factory.vertx();
vertx.deployVerticle(new ServerVerticle());
vertx.deployVerticle(new StockPriceWebSocketVerticle());
}
}
-ServerVerticle
package com.amit.vertx.MyVertxProject;
import io.vertx.core.AbstractVerticle;
import io.vertx.core.Vertx;
import io.vertx.core.http.HttpMethod;
import io.vertx.core.http.HttpServer;
import io.vertx.core.http.HttpServerResponse;
import io.vertx.core.json.Json;
import io.vertx.core.json.JsonObject;
import io.vertx.ext.web.Route;
import io.vertx.ext.web.Router;
import io.vertx.ext.web.RoutingContext;
import io.vertx.ext.web.handler.BodyHandler;
import io.vertx.ext.web.handler.CookieHandler;
import io.vertx.ext.web.handler.CorsHandler;
import io.vertx.ext.web.handler.SessionHandler;
import io.vertx.ext.web.sstore.LocalSessionStore;
public class ServerVerticle extends AbstractVerticle{
@Override
public void start() throws Exception {
try {
HttpServer httpServer = vertx.createHttpServer();
//Main router
Router router = Router.router(vertx);
//A cross origin request
CorsHandler corsHandler =
CorsHandler.create("http://localhost:4200");
corsHandler.allowedMethod(HttpMethod.OPTIONS);
corsHandler.allowedMethod(HttpMethod.GET);
corsHandler.allowedMethod(HttpMethod.POST);
corsHandler.allowedMethod(HttpMethod.DELETE);
corsHandler.allowedHeader("x-requested-with");
corsHandler.allowedHeader("Access-Control-Allow-Origin");
corsHandler.allowedHeader("Origin");
corsHandler.allowedHeader("Content-Type");
corsHandler.allowedHeader("Accept");
corsHandler.allowedHeader("Access-Control-Allow-Credentials");
corsHandler.allowedHeader("Access-Control-Allow-Headers");
corsHandler.allowCredentials(true);
router.route().handler(corsHandler);
router.route().handler(BodyHandler.create());
//for session handling
SessionHandler sessionHandler = SessionHandler.create(LocalSessionStore.create(vertx));
router.route().handler(sessionHandler);
httpServer.requestHandler(router::accept).listen(8080);
System.out.println("Server Started");
}catch (Exception e) {
e.printStackTrace();
}
}
}
public class StockPriceWebSocketVerticle extends AbstractVerticle{
@Override
public void start() throws Exception {
vertx.setPeriodic(5000, new Handler<Long>() {
@Override
public void handle(Long timerId) {
JsonObject obj_1 = new JsonObject();
obj_1.put("company", "Amazon");
obj_1.put("datetime", new Date().toString());
obj_1.put("price", 100);
JsonObject obj_2 = new JsonObject();
obj_2.put("company", "Google");
obj_2.put("datetime", new Date().toString());
obj_2.put("price", 1005);
JsonArray jsonarray = new JsonArray();
jsonarray.add(obj_1);
jsonarray.add(obj_2);
vertx.eventBus().publish("stock.price.event.bus", jsonarray);
System.out.println("sent data to UI"+jsonarray.toString());
}
});
}
}
-----output---------
sent data to UI[{"company":"Amazon","datetime":"Sat Apr 06 17:11:37 EDT 2019","price":100},{"company":"Google","datetime":"Sat Apr 06 17:11:37 EDT 2019","price":1005}]
sent data to UI[{"company":"Amazon","datetime":"Sat Apr 06 17:11:42 EDT 2019","price":100},{"company":"Google","datetime":"Sat Apr 06 17:11:42 EDT 2019","price":1005}]
Angular-6 UI组件（使用角度材质的数据表）
<div id="stockpricetable" style="width:60%; text-align: left; font-size: x-large;border:1px darksalmon;">
<table mat-table [dataSource]="dataSource" matSort style="width:95%;" >
<ng-container matColumnDef="company">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Company. </th>
<td mat-cell *matCellDef="let element"> {{element.company}} </td>
</ng-container>
<ng-container matColumnDef="datetime">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Date & Time. </th>
<td mat-cell *matCellDef="let element"> {{element.datetime}} </td>
</ng-container>
<ng-container matColumnDef="price">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Price. </th>
<td mat-cell *matCellDef="let element"> {{element.price}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns;sticky: true" ></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns; "></tr>
</table>
</div>
角度服务调用（订阅vertx端点）并更新数据源
stockprice.component.ts
import { Component, OnInit , ViewChild} from '@angular/core';
import { MatTableDataSource, MatSort, MatPaginator } from '@angular/material';
import {StockPriceService} from './stockprice.service';
import * as EventBus from 'vertx3-eventbus-client';
@Component({
selector: 'app-stockprice',
templateUrl: './stockprice.component.html',
styleUrls: ['./stockprice.component.css']
})
export class StockpriceComponent implements OnInit {
@ViewChild(MatSort) sort: MatSort;
displayedColumns: string[] = ['company','datetime','price'];
dataSource = new MatTableDataSource();
private eb;
private url = 'http://localhost:8080/eventbus';
constructor(private stockPriceService: StockPriceService) { }
ngOnInit() {
this.dataSource.sort = this.sort;
this.eb = new EventBus(this.url);
console.log("connecting to websocket-1");
this.eb.onopen = function () {
console.log("connecting to websocket-2");
// set a handler to receive a message
this.eb.registerHandler('stock.price.event.bus', function (error, message) {
console.log('received a message: ' + JSON.stringify(message.body));
this.dataSource.data = JSON.stringify(message.body);
});
};
this.eb.enableReconnect(true);
}
}
}