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

  1. Angular + Websocket

    Angular使用RxJS,它本质上是一个反应式扩展的javascript实现.这是一个使用可观察序列组成异步和基于事件的程序的库,非常适合使用WebSockets. 简而言之,RxJS允许我们从we ...

  2. WebSocket API使用篇检测浏览器是否支持WebSocket(4)

    WebSocket API是下一代客户端-服务器的异步通信方法.前面有三篇文章已经对WebSocket有了一些介绍,这里我总结了一下.我在使用WebSockets API过程中遇到的问题. 1.检测浏 ...

  3. 初识webSocket及其使用

    阅读目录 1.什么是webSocket? 2.webSocket实现原理 3.webSocket优点 4.webSocket和socket的区别 5.webSocket API 6.webSocket ...

  4. 漫扯:从polling到Websocket

    Http被设计成了一个单向的通信的协议,即客户端发起一个request,然后服务器回应一个response.这让服务器很为恼火:我特么才是老大,我居然不能给小弟发消息... 轮询 老大发火了,小弟们自 ...

  5. 细说WebSocket - Node篇

    在上一篇提高到了 web 通信的各种方式,包括 轮询.长连接 以及各种 HTML5 中提到的手段.本文将详细描述 WebSocket协议 在 web通讯 中的实现. 一.WebSocket 协议 1. ...

  6. java使用websocket,并且获取HttpSession,源码分析

    转载请在页首注明作者与出处 http://www.cnblogs.com/zhuxiaojie/p/6238826.html 一:本文使用范围 此文不仅仅局限于spring boot,普通的sprin ...

  7. WebSocket - ( 一.概述 )

    说到 WebSocket,不得不提 HTML5,作为近年来Web技术领域最大的改进与变化,包含CSS3.离线与存储.多媒体.连接性( Connectivity )等一系列领域,而即将介绍的 WebSo ...

  8. php+websocket搭建简易聊天室实践

    1.前言 公司游戏里面有个简单的聊天室,了解了之后才知道是node+websocket做的,想想php也来做个简单的聊天室.于是搜集各种资料看文档.找实例自己也写了个简单的聊天室. http连接分为短 ...

  9. Demo源码放送:打通B/S与C/S !让HTML5 WebSocket与.NET Socket公用同一个服务端!

    随着HTML5 WebSocket技术的日益成熟与普及,我们可以借助WebSocket来更加方便地打通BS与CS -- 因为B/S中的WebSocket可以直接连接到C/S的服务端,并进行双向通信.如 ...

随机推荐

  1. 实验吧编程题python

    网址:http://ctf5.shiyanbar.com/jia 之后第一步就是刷新一下网页,发现给的公式会变,(废话,要不直接算数不就行了...)但是格式不会变. 所以那就暴力一点好了,我们看一下这 ...

  2. golang的加法比C快?

    本文同时发表在https://github.com/zhangyachen/zhangyachen.github.io/issues/142 1.31 晚上的火车回家,在公司还剩两个小时,无心工作,本 ...

  3. Kubernetes-深入分析集群安全机制(3.6)

    集群的安全性主要考虑以下几个方面: 容器与所在宿主机的隔离: 限制容器给基础设施及其他容器带来消极影响的能力: 最小权限原则--合理限制所有组件的权限,确保组件只执行它被授权的行为,通过限制单个组件的 ...

  4. python2.7练习小例子(二十九)

        29):1.题目:按相反的顺序输出列表的值. #!/usr/bin/python # -*- coding: UTF-8 -*- a = ['one', 'two', 'three'] for ...

  5. KMP python实现

    首先去 https://blog.csdn.net/starstar1992/article/details/54913261/ 这里看下思想: 然后代码实现,一定要多调试几遍方能看懂: def ge ...

  6. 封装一个ExcelHelper,方便将Excel直接转成Datatable对象

    public class ExcelHelper { /// <summary> /// Excel转换成DataTable /// </summary> /// <pa ...

  7. Returning Values from Bash Functions

    转自:https://www.linuxjournal.com/content/return-values-bash-functions Bash functions, unlike function ...

  8. 多个Target的使用

    背景介绍 开发过程中,我们会在内网搭建一个测试服务器,开发.测试都是在内网进行的.这样产生脏数据不会影响外网的服务器.外网服务器只有最后发布时才会进行一些必要的测试. 还有就是要对同一份代码生成不同的 ...

  9. Clean Code 《代码整洁之道》前四章读书笔记

    第一章: 整洁的代码只做好一件事   减少重复代码   提高表达力   提早构建简单抽象   让营地比你来时更干净   第二章:有意义的命名 名副其实:如果名称需要注释来补充,就不算是名副其实.   ...

  10. SQL 注入教程

    SQL 注入测评教程 1     准备 安装包:Burpsuit.Python27.sqlmap 2     安装配置 2.1    Burpsuit 1)       解压Burpsuit 2)   ...