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的更多相关文章

  1. angular2 Http和websocket

    1. 注入HttpModule模块: 2. 注入http服务 map方法需要导入"rajx/Rx"组件,作用是针对流的处理.Json是将流转化为json格式.subscribe订阅 ...

  2. NetCore WebSocket 即时通讯示例

    1.新建Netcore Web项目 2.创建简易通讯协议 public class MsgTemplate { public string SenderID { get; set; } public ...

  3. 深入理解Angular2变化监测和ngZone

    转载自GitHub JTangming : https://github.com/JTangming/tm/issues/4 Angular应用程序通过组件实例和模板之间进行数据交互,也就是将组件的数 ...

  4. Angular2入门系列教程7-HTTP(一)-使用Angular2自带的http进行网络请求

    上一篇:Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数 感觉这篇不是很好写,因为涉及到网络请求,如果采用真实的网络请求,这个例子大家拿到手估计还要自己写一个web ...

  5. Angular2学习笔记(1)

    Angular2学习笔记(1) 1. 写在前面 之前基于Electron写过一个Markdown编辑器.就其功能而言,主要功能已经实现,一些小的不影响使用的功能由于时间关系还没有完成:但就代码而言,之 ...

  6. Angular杂谈系列1-如何在Angular2中使用jQuery及其插件

    jQuery,让我们对dom的操作更加便捷.由于其易用性和可扩展性,jQuer也迅速风靡全球,各种插件也是目不暇接. 我相信很多人并不能直接远离jQuery去做前端,因为它太好用了,我们以前做的东西大 ...

  7. Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数

    上一篇:Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数 之前介绍了简单的路由以及传参,这篇文章我们将要学习复杂一些的路由以及传递其他附加参数.一个好的路由系统可以使我们 ...

  8. Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数

    上一篇:Angular2入门系列教程-服务 上一篇文章我们将Angular2的数据服务分离出来,学习了Angular2的依赖注入,这篇文章我们将要学习Angualr2的路由 为了编写样式方便,我们这篇 ...

  9. Angular2入门系列教程4-服务

    上一篇文章 Angular2入门系列教程-多个组件,主从关系 在编程中,我们通常会将数据提供单独分离出来,以免在编写程序的过程中反复复制粘贴数据请求的代码 Angular2中提供了依赖注入的概念,使得 ...

随机推荐

  1. Python小白学习之路(二十二)—【生成器】

    一.什么是生成器? 生成器可以理解成是一种数据类型,特殊地是生成器可以自动实现迭代器协议其他的数据类型需要调用自己内置的__iter__方法所以换种说法,生成器就是可迭代对象 !回忆:很重要的迭代器协 ...

  2. 剑指offer四十八之不用加减乘除做加法

    一.题目 写一个函数,求两个整数之和,要求在函数体内不得使用+.-.*./四则运算符号. 二.思路 1. 采用位运算的方法,分三步: (1).两个数异或:相当于每一位相加,而不考虑进位 (2).两个数 ...

  3. (转) DB2 HADR

    转自http://www.ibm.com/developerworks/cn/data/library/techarticles/dm-0508luojunkai/ 原文:http://blog.cs ...

  4. C++ STL 初探

    学过C++的人肯定会很熟悉STL标准模板库,STL其实就是封装了一系列的接口,供我们调用.很多函数或者算法的实现不需要我们从头开始写,大大提高我们的编程效率.这篇博客在简单介绍STL的情况下,会详细的 ...

  5. Java—关于String的分析

    一.两种赋值方式的比较 1.直接赋值法:String s1="abc"; 这种赋值方法用的最多,因为它可能不需要创建对象,或者只创建一次. 它首先会判断字符串常量池有没有存在字符串 ...

  6. Linux笔记:linux常用命令

    文件目录操作 1.展示目录命令 ls # 展示当前目录下的可见文件 ls -a # 展示当前目录下所有的文件(包括隐藏的文件) ls -l # 展示当前目录下文件的详细信息 ll # 展示当前目录下文 ...

  7. java学习--Reflection反射机制

    JAVA反射机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法:对于任意一个对象,都能够调用它的任意方法和属性:这种动态获取信息以及动态调用对象方法的功能称为java语言的反射机制. ...

  8. InnoSetup打包时出现Interal error: CallSpawnServer: Unexpected response: $0.错误的解决办法

    如果在使用Innosetup打包软件时,如果出现Interal error: CallSpawnServer: Unexpected response: $0.错误, 如下图: 可以查看 Innose ...

  9. Android JNI初体验

    欢迎转载,转载请注明出处:http://www.cnblogs.com/lanrenxinxin/p/4696991.html 开始接触Android JNI层面的内容,推荐一本不错的入门级的书< ...

  10. JavaScript初级面试题

    前面几题是会很基础,越下越有深度. 初级Javascript: 1.JavaScript是一门什么样的语言,它有哪些特点? 没有标准答案. 2.JavaScript的数据类型都有什么? 基本数据类型: ...