在Angular项目使用socket.io实现通信的方法

作者: 嗫?暁雲?
来源: 51数据库
2021-07-06

step1、为项目安装依赖

在终端输入以下命令为我们的angular项目安装express、socket.io、socket.io-client

本人安装的各版本信息如下：

step2、编写后台服务

可以在项目中新建一个server文件夹，用来存放我们的后台服务，然后新建文件

step3、创建angular服务

这里我们创建了两个方法，sendmessage用于将客户端的信息发送给服务端，getmessages用于建立连接，监听服务端事件并返回一个可观察的对象。

step4、创建组件

这样一个简单的socket通信就完成了，效果图如下：

启动服务

前端页面

如果遇到跨域问题，大概率是没有处理跨域，检查自己的代码和端口号是否正确，详情参考handing-cors

另外，如果遇到（本人遇到了，愣是在网上找了半天依然未果）
post http://localhost:4000/socket.io/?eio=3&transport=polling&t=nqtz_e3 400 (bad request)
这类的报错，npm安装socket.io-client（这也是为什么我在文章一开始就安装它），在service.ts文件引入

在网上看到很多人是这样写的 import * as io from ‘socket.io-client'，这种写法在typescript中是会报错的，改成上面的写法即可。

到此这篇关于在angular项目使用socket.io实现通信的文章就介绍到这了,更多相关angular使用socket.io实现通信内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

推荐阅读