springboot+websocket+angular

一、websocket服务端代码参考 另一篇博客 --> 传送门

二、ng new socket 创建angular demo项目

ng new socket

三、安装 stompjs js库

npm install stompjs --save

四、app.component.ts 代码 (和js的写法大同小异)

import { Component } from &＃39;&＃64;angular/core&＃39;;
const SockJS &＃61; require(&＃39;sockjs-client&＃39;);
const Stomp &＃61; require(&＃39;stompjs&＃39;);&＃64;Component({selector: &＃39;app-root&＃39;,templateUrl: &＃39;./app.component.html&＃39;,styleUrls: [&＃39;./app.component.css&＃39;]
})
export class AppComponent {title &＃61; &＃39;app works!&＃39;;stompClient: any;constructor() {const that &＃61; this;const socket &＃61; new SockJS(&＃39;http://localhost:8080/websocket-server&＃39;);this.stompClient &＃61; Stomp.over(socket);this.stompClient.connect({}, function (frame) {console.log(&＃39;Connected: &＃39; &＃43; frame);that.stompClient.subscribe(&＃39;/topic/message&＃39;, function (greeting) {alert(greeting);});}, function (err) {console.log(&＃39;err&＃39;, err);});}send() {this.stompClient.send(&＃39;/server/send&＃39;, {}, &＃39;send&＃39;);}
}


五、app.component.html

六、启动java项目和angular项目 访问localhost:4200 点击按钮测试