在 Angular4 中使用网络套接字？

Posted 2023-02-16

【中文标题】在 Angular4 中使用网络套接字？

【英文标题】：Using web-sockets with Angular4?

【发布时间】：2017-06-30 19:05:00

【问题描述】：

如何 HttpModule 不支持，有没有可以使用的 NPM 包？

设置：

.NET Core Web API 用于 API 访问 列表项

数据库的 MS SQL DB

【问题讨论】：

因为new WebSocket('http://www.example.com') 不需要模块。

【参考方案1】：

Angular 不提供支持 WebSockets 的特殊对象。但好消息是所有浏览器都支持 WebSocket，您可以在 Angular4 应用程序中使用它。在这个应用程序中，我在服务器（Node.js）上使用 ws 包，在客户端使用浏览器的 WebSocket 对象（参见https://github.com/Farata/angular2typescript/blob/master/Angular4/auction/client/src/app/product-detail/websocket.service.ts）

【参考方案2】：

一个选项，您始终可以使用 Firebase（顺便说一句，这是一个非常有趣的选项）。几乎所有繁重的工作都为您完成。

否则，WebSockets 是 html5 标准。你只需要编写一些代码来实现它。查看这个包含各种信息、回声演示/测试等的网站：

https://www.websocket.org/

【讨论】：

我的后端数据库是 MS SQL DB，而不是 Firebase。

那真的没关系。我已经集成了 Firebase 登录并推送到应用程序中，而不将其用作我的数据库。但除此之外，Web 套接字实现起来并不复杂，您可以轻松创建模块/服务。再次查看 websocket.org。你仍然需要做后端工作，但同样有各种各样的包，python 等。

【参考方案3】：

你可以使用socket.io-client，安装的时候一定要包含types。

https://www.npmjs.com/package/socket.io-client

安装： npm install --save socket.io-client

和

npm install --save @types/socket.io-client 或 npm install --save-dev @types/socket.io-client

注意：如果有兴趣，有一个很棒的教程，其中包括对 MEAN 全栈环境的指导here。

edit: 正如其他人所提到的，WebSocket 是一种 HTML5 标准。这将为前端套接字交互创建一个易于使用的界面，并且适用于任何后端环境。

【参考方案4】：

我在我的 Angular 项目中使用 angular2-websocket/angular2-websocket， 它工作得很好 https://github.com/afrad/angular2-websocket

【讨论】：

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接的答案可能会失效。