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. centos7搭建kafka集群-第一篇

    Kafka初识 1.Kafka使用背景 在我们大量使用分布式数据库.分布式计算集群的时候,是否会遇到这样的一些问题: 我们想分析下用户行为(pageviews),以便我们设计出更好的广告位 我想对用户 ...

  2. BeautifulSoap库入门

    BeautifulSoup类的基本元素 基本元素 说明 Tag 标签,最基本的信息组织单元,分别用<>和</>标明开头和结尾 Name 标签的名字,<p>-< ...

  3. 剑指offer五十六之删除链表中重复的结点

    一.题目 在一个排序的链表中,存在重复的结点,请删除该链表中重复的结点,重复的结点不保留,返回链表头指针. 例如,链表1->2->3->3->4->4->5 处理后 ...

  4. (转)Python - 字符串对齐

    https://zhuanlan.zhihu.com/p/33923344-----------Python小知识:用format格式化输出字符串 版权声明:本文为博主原创文章,未经博主允许不得转载. ...

  5. Java模拟双色球彩票

    package practice1; import java.util.Random; import java.util.Scanner; public class Test3 { /** * * 模 ...

  6. 《LeetBook》leetcode题解(16):3Sum Closest [M]

    我现在在做一个叫<leetbook>的免费开源书项目,力求提供最易懂的中文思路,目前把解题思路都同步更新到gitbook上了,需要的同学可以去看看 书的地址:https://hk029.g ...

  7. ZigBee 学习资源

    1.雪帕的主页 http://home.cnblogs.com/u/yqh2007/ 2.刘志鹏的主页 http://www.cnblogs.com/hustlzp/archive/2011/02/1 ...

  8. Disconf 学习系列之Disconf 的模块架构图

    不多说,直接上干货!  Disconf 的模块架构主要包括: Disconf-Tools . Disconf-Web. Disconf-client 和  Disconf-Core. 每个模块的简单介 ...

  9. JavaScript -- 运算符、eval、Parse

    ----- 003-运算符.html ----- <!DOCTYPE html> <html> <head> <meta http-equiv="C ...

  10. Struts文件上传(FormFile)

    Struts中FormFile用于文件进行上传 1.在jsp文件中进行定义 <form action="/StrutsFileUpAndDown/register.do" m ...