angular2 如何使用websocket
1.npm下载:
npm install angular2-websocket
2.需要在哪个组件使用就在那里引入:
import {$WebSocket} from 'angular2-websocket/angular2-websocket'
3.具体的使用看以下代码:
 sendMsg() {
    //新建连接
     var ws = new $WebSocket("具体地址");
    //打开连接
     ws.onOpen(function () {
       console.log('连接成功')
         ws.send('发送的消息内容').subscribe(
           (msg) => {
           //连接成功此处打印成功的提示
             console.log("next", msg.data);
           },
           (msg) => {
            //连接失败则打印此信息
             console.log("error", msg);
           },
           () => {
             //不管有没有连接成功必须执行到此处
             console.log("complete");
             // 可在此处关闭连接,由你websocket实现的具体功能决定
             // ws.close(false);    // close
             // ws.close(true);    // close immediately
           }
         );
     });
    //接收服务器返回的信息就另外写个
     ws.onMessage(
       (msg: MessageEvent) => {
         console.log('recriveMsg',msg)
       },
       { autoApply: false }
     );
   }
4.以上是最基本的angular2 websocket 的使用方法,如需了解更多请移步看文档
angular2 如何使用websocket的更多相关文章
- angular2 Http和websocket
		
1. 注入HttpModule模块: 2. 注入http服务 map方法需要导入"rajx/Rx"组件,作用是针对流的处理.Json是将流转化为json格式.subscribe订阅 ...
 - NetCore WebSocket 即时通讯示例
		
1.新建Netcore Web项目 2.创建简易通讯协议 public class MsgTemplate { public string SenderID { get; set; } public ...
 - 深入理解Angular2变化监测和ngZone
		
转载自GitHub JTangming : https://github.com/JTangming/tm/issues/4 Angular应用程序通过组件实例和模板之间进行数据交互,也就是将组件的数 ...
 - Angular2入门系列教程7-HTTP(一)-使用Angular2自带的http进行网络请求
		
上一篇:Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数 感觉这篇不是很好写,因为涉及到网络请求,如果采用真实的网络请求,这个例子大家拿到手估计还要自己写一个web ...
 - Angular2学习笔记(1)
		
Angular2学习笔记(1) 1. 写在前面 之前基于Electron写过一个Markdown编辑器.就其功能而言,主要功能已经实现,一些小的不影响使用的功能由于时间关系还没有完成:但就代码而言,之 ...
 - Angular杂谈系列1-如何在Angular2中使用jQuery及其插件
		
jQuery,让我们对dom的操作更加便捷.由于其易用性和可扩展性,jQuer也迅速风靡全球,各种插件也是目不暇接. 我相信很多人并不能直接远离jQuery去做前端,因为它太好用了,我们以前做的东西大 ...
 - Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数
		
上一篇:Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数 之前介绍了简单的路由以及传参,这篇文章我们将要学习复杂一些的路由以及传递其他附加参数.一个好的路由系统可以使我们 ...
 - Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数
		
上一篇:Angular2入门系列教程-服务 上一篇文章我们将Angular2的数据服务分离出来,学习了Angular2的依赖注入,这篇文章我们将要学习Angualr2的路由 为了编写样式方便,我们这篇 ...
 - Angular2入门系列教程4-服务
		
上一篇文章 Angular2入门系列教程-多个组件,主从关系 在编程中,我们通常会将数据提供单独分离出来,以免在编写程序的过程中反复复制粘贴数据请求的代码 Angular2中提供了依赖注入的概念,使得 ...
 
随机推荐
- 2019CVPR《Mask Scoring R-CNN》
			
题目:<Mask Scoring R-CNN> CVPR 2019 Oral Paper(2017年783篇论文,获得口头报道的有215篇,oral paper很有含金量) 华中科技大学h ...
 - POST 请求的 forHTTPHeaderField
			
Response Headers(从服务器得到的回复的头) Field name Description Example Status Access-Control-Allow-Origin Spec ...
 - easyui combobox下拉框复制后再禁用,点击不会出现下拉框
			
easyui combobox下拉框禁用,点击不会出现下拉框 需要做到,在给easyui combobox赋值后,再禁用easyui combobox 解决办法: $("#time-sele ...
 - Python -- 网络编程 -- 认识Python3的urllib库
			
Python3的urllib包含5个模块 urllib error parse request response robotparser 各个模块的主要成员: error ['ContentTooSh ...
 - 《Mysql技术内幕,Innodb存储引擎》——索引与算法
			
B+树 B+树中,所有记录节点都按照键值的大小顺序放在同一层叶子节点,各个叶子节点指针进行连接. 图中指针是单向的,但是书上的图是双向的,而且旋转应该也是双向才能完成) B+树插入处理 Leaf Pa ...
 - Nginx配置访问权限
			
基于IP配置Nginx的访问权限 Nginx配置通过两种途径支持基本访问权限的控制,其中一种是由HTTP标准模块ngx_http_access_module支持的,通过IP来判断客户端是否拥有对Ngi ...
 - linux内核学习之保护模式(一)
			
来源:http://blog.csdn.net/yishuige/article/details/50434746 这一章涉及intel8086系列cpu的保护模式编程,应该是学习内核编程,驱动编程及 ...
 - mongodb-手写mongoclient加入到springmvc中
			
由于一个项目使用的是springmvc3.x版本, mongodb使用的为3.x版本, 所以springmvc继承的mongodb-data并不可用, 只能自己手写一个mongoclient并加入到s ...
 - python算法之冒泡排序
			
目录 python之冒泡排序 算法原理 算法分析 代码实现 总结 python之冒泡排序 概念: 重复地走访过要排序的元素列,依次比较两个相邻的元素,如果他们的顺序(如从大到小.首字母从A到Z)错误就 ...
 - Ionic2开发环境搭建
			
关于网络环境:ionic开发环境不需要FQ.我这里没有设置FQ,亲测可行.但是angular2的开发环境搭建,则需要FQ网络,否则很多包会安装失败. 建议大家在搭建开发环境的时候,不要参考百度出来的各 ...