ng websocket
ng使用websocket
1.安装依赖库
npm install ws --save
2.安装类型定义文件
npm install @types/ws --save
3.编写服务
import { Injectable } from '@angular/core';
import {Observable} from "rxjs/Observable";
@Injectable()
export class WebSocketService {
ws:WebSocket;
constructor() { }
createObservableSocket(url:string):Observable<any>{
this.ws=new WebSocket(url);
return new Observable(
observer=>{
this.ws.onmessage=(event)=>observer.next(event.data);
this.ws.onerror=(event)=>observer.error(event);
this.ws.onclose=(event)=>observer.complete();
}
)
}
sendMessage(msg:string){
this.ws.send(msg);
}
}
4.在控制器中使用
import { Component, OnInit } from '@angular/core';
import {Observable} from "rxjs/Observable";
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/throttleTime';
import 'rxjs/add/observable/fromEvent';
import 'rxjs/add/operator/retry';
import {observable} from "rxjs/symbol/observable";
import {HttpService} from "../service/http.service";
import {WebSocketService} from "../service/web-socket.service";
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
constructor(private httpreq:HttpService,private wsService:WebSocketService) {
}
ngOnInit() {
//this.httpreq._get('',(data)=>console.log(data));
this.wsService.createObservableSocket('ws://localhost:8080')
.subscribe(
data=>console.log(data),
err=>console.log(err),
()=>console.log('it s over')
)
}
sendMessageToServer(msg:string){
this.wsService.sendMessage(msg);
}
}
ng websocket的更多相关文章
- Angular + Websocket
Angular使用RxJS,它本质上是一个反应式扩展的javascript实现.这是一个使用可观察序列组成异步和基于事件的程序的库,非常适合使用WebSockets. 简而言之,RxJS允许我们从we ...
- WebSocket API使用篇检测浏览器是否支持WebSocket(4)
WebSocket API是下一代客户端-服务器的异步通信方法.前面有三篇文章已经对WebSocket有了一些介绍,这里我总结了一下.我在使用WebSockets API过程中遇到的问题. 1.检测浏 ...
- 初识webSocket及其使用
阅读目录 1.什么是webSocket? 2.webSocket实现原理 3.webSocket优点 4.webSocket和socket的区别 5.webSocket API 6.webSocket ...
- 漫扯:从polling到Websocket
Http被设计成了一个单向的通信的协议,即客户端发起一个request,然后服务器回应一个response.这让服务器很为恼火:我特么才是老大,我居然不能给小弟发消息... 轮询 老大发火了,小弟们自 ...
- 细说WebSocket - Node篇
在上一篇提高到了 web 通信的各种方式,包括 轮询.长连接 以及各种 HTML5 中提到的手段.本文将详细描述 WebSocket协议 在 web通讯 中的实现. 一.WebSocket 协议 1. ...
- java使用websocket,并且获取HttpSession,源码分析
转载请在页首注明作者与出处 http://www.cnblogs.com/zhuxiaojie/p/6238826.html 一:本文使用范围 此文不仅仅局限于spring boot,普通的sprin ...
- WebSocket - ( 一.概述 )
说到 WebSocket,不得不提 HTML5,作为近年来Web技术领域最大的改进与变化,包含CSS3.离线与存储.多媒体.连接性( Connectivity )等一系列领域,而即将介绍的 WebSo ...
- php+websocket搭建简易聊天室实践
1.前言 公司游戏里面有个简单的聊天室,了解了之后才知道是node+websocket做的,想想php也来做个简单的聊天室.于是搜集各种资料看文档.找实例自己也写了个简单的聊天室. http连接分为短 ...
- Demo源码放送:打通B/S与C/S !让HTML5 WebSocket与.NET Socket公用同一个服务端!
随着HTML5 WebSocket技术的日益成熟与普及,我们可以借助WebSocket来更加方便地打通BS与CS -- 因为B/S中的WebSocket可以直接连接到C/S的服务端,并进行双向通信.如 ...
随机推荐
- phpcms2008网站漏洞如何修复 远程代码写入缓存漏洞利用
SINE安全公司在对phpcms2008网站代码进行安全检测与审计的时候发现该phpcms存在远程代码写入缓存文件的一个SQL注入漏洞,该phpcms漏洞危害较大,可以导致网站被黑,以及服务器遭受黑客 ...
- Zookeeper系列(二) Zookeeper配置说明
在配置ZooKeeper配置文件时,有些参数是必需的,有些参数是可选的,这些必需的参数构成了Zookeeper配置文件的最低配置要求,如果需要对ZooKeeper进行更详细的配置,可以 ...
- Android面试收集录 文件存储
1.请描述Android SDK支持哪些文件存储技术? 使用SharePreferences保存key-value类型的数据 流文件存储(openFileOutput+openFileInput或Fi ...
- nexys4-DDR开发板温度传感器ADT7420U
1. 用这个板子做个什么功能来学习?板子上有个温度传感器,看下官方是否有例程,板子售价1780元,相当的贵,下面是I2C接口, 看下芯片的引脚图 2. 资料下载地址,得注册账号 https://ref ...
- 【好帖】 Mark
1. 管理篇 2. 程序员选择公司的8个标准 3. 实用工具 4. 离职跳槽 5. DBA 6. 做一个网站多少钱? 7. 十大算法 8. 寻求用户评价App的正确方法 9. 工程师忽略的隐形成本 1 ...
- PyQt的QString和python的string的区别
转载于http://blog.chinaunix.net/uid-200142-id-4018863.html python的string和PyQt的QString的区别 python string和 ...
- C++学习011-常用内存分配及释放函数
C++用有多种方法来分配及释放内存,下面是一些经常使用的内存分配及释放函数 现在我还是一个技术小白,一般用到也指示 new+delete 和 malloc和free 其他的也是在学习中看到,下面的文字 ...
- CodeForces - 948C(前缀和 + 二分)
链接:CodeForces - 948C 题意:N天,每天生产一堆雪体积 V[i] ,每天每堆雪融化 T[i],问每天融化了多少雪. 题解:对 T 求前缀和,求每一堆雪能熬过多少天,再记录一下多余的就 ...
- 修复 Ubuntu 中“Unable to lock the administration directory (/var/lib/dpkg/)”
在 Ubuntu 或者它的衍生版如 Linux Mint(我已经作为日常工作使用的系统)中使用 apt-get 命令或者其相对更新的APT 管理工具时,你可能会在命令行中看到一个 unable to ...
- Android Studio 添加模块依赖
原文地址: http://fanjiajia.cn/2018/09/27/Android%20Studio%20%E6%B7%BB%E5%8A%A0%E6%A8%A1%E5%9D%97%E4%BE%9 ...