angular中使用Socket.io实例代码


Posted in Javascript onJune 03, 2017

服务端(nodeJs/express):

let app = require('express')();
let http = require('http').Server(app);
let io = require('socket.io')(http);

io.on('connection', (socket) => {
 console.log('user connected');
 
 socket.on('disconnect', function(){
  console.log('user disconnected');
 });
 
 socket.on('add-message', (message) => {
  io.emit('message', {type:'new-message', text: message});  
 });
});

http.listen(5000, () => {
 console.log('started on port 5000');
});

客户端,创建一个ChatService

import { Subject } from 'rxjs/Subject';
import { Observable } from 'rxjs/Observable';
import * as io from 'socket.io-client';

export class ChatService {
 private url = 'http://localhost:5000'; 
 private socket;
 
 sendMessage(message){
  this.socket.emit('add-message', message);  
 }
 
 getMessages() {
  let observable = new Observable(observer => {
   this.socket = io(this.url);
   this.socket.on('message', (data) => {
    observer.next(data);  
   });
   return () => {
    this.socket.disconnect();
   }; 
  })   
  return observable;
 } 
}

ChatComponent

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Control }      from '@angular/common';
import { ChatService }    from './chat.service';

@Component({
 moduleId: module.id,
 selector: 'chat',
 template: `<div *ngFor="let message of messages">
           {{message.text}}
          </div>
          <input [(ngModel)]="message" /><button (click)="sendMessage()">Send</button>`,
 providers: [ChatService]
})
export class ChatComponent implements OnInit, OnDestroy {
 messages = [];
 connection;
 message;
 
 constructor(private chatService:ChatService) {}

 sendMessage(){
  this.chatService.sendMessage(this.message);
  this.message = '';
 }

 ngOnInit() {
  this.connection = this.chatService.getMessages().subscribe(message => {
   this.messages.push(message);
  })
 }
 
 ngOnDestroy() {
  this.connection.unsubscribe();
 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript插入样式实现代码
Feb 22 Javascript
jQuery中将函数赋值给变量的调用方法
Mar 23 Javascript
JavaScript动态创建link标签到head里的方法
Dec 22 Javascript
js电话号码验证方法
Sep 28 Javascript
常用javascript表单验证汇总
Jul 20 Javascript
Angular多选、全选、批量选择操作实例代码
Mar 10 Javascript
Iphone手机、安卓手机浏览器控制默认缩放大小的方法总结(附代码)
Aug 18 Javascript
原生JS实现移动端web轮播图详解(结合Tween算法造轮子)
Sep 10 Javascript
Vue集成Iframe页面的方法示例
Dec 12 Javascript
jQuery ajax仿Google自动提示SearchSuggess功能示例
Mar 28 jQuery
node.js中 redis 的安装和基本操作示例
Feb 10 Javascript
VUE中V-IF条件判断改变元素的样式操作
Aug 09 Javascript
jquery请求servlet实现ajax异步请求的示例
Jun 03 #jQuery
深入理解Node中的buffer模块
Jun 03 #Javascript
MvcPager分页控件 适用于Bootstrap
Jun 03 #Javascript
全面解析Node.js 8 重要功能和修复
Jun 02 #Javascript
vue 中自定义指令改变data中的值
Jun 02 #Javascript
Jquery EasyUI $.Parser
Jun 02 #jQuery
BootStrap 动态表单效果
Jun 02 #Javascript
You might like
基于PHP+jQuery+MySql实现红蓝(顶踩)投票代码
2015/08/25 PHP
解决iframe的frameborder在chrome/ff/ie下的差异
2010/08/12 Javascript
JS 进度条效果实现代码整理
2011/05/21 Javascript
jquery 实现checkbox全选,反选,全不选等功能代码(奇数)
2012/10/24 Javascript
jQuery筛选器children()案例详解(图文)
2013/02/17 Javascript
jquery eval解析JSON中的注意点介绍
2013/08/23 Javascript
2014最热门的JavaScript代码高亮插件推荐
2014/11/25 Javascript
jQuery多媒体插件jQuery Media Plugin使用详解
2014/12/19 Javascript
基于JavaScript实现窗口拖动效果
2017/01/18 Javascript
jquery实现页面加载效果
2017/02/21 Javascript
JavaScrpt中如何使用 cookie 设置查看与删除功能
2017/07/09 Javascript
JavaScript实现离开页面前提示功能【附jQuery实现方法】
2017/09/26 jQuery
vue+webpack模拟后台数据的示例代码
2018/07/26 Javascript
使用Angular 6创建各种动画效果的方法
2018/10/10 Javascript
vue中使用mxgraph的方法实例代码详解
2019/05/17 Javascript
JS字符串常用操作方法实例小结
2019/06/24 Javascript
mustache.js实现首页元件动态渲染的示例代码
2020/12/28 Javascript
[01:10]DOTA2次级职业联赛 - Fly战队宣传片
2014/12/01 DOTA
python自动化测试之连接几组测试包实例
2014/09/28 Python
python 异常处理总结
2016/10/18 Python
老生常谈Python基础之字符编码
2017/06/14 Python
浅谈JupyterNotebook导出pdf解决中文的问题
2020/04/22 Python
pycharm激活方法到2099年(激活流程)
2020/09/22 Python
css和css3弹性盒模型实现元素宽度(高度)自适应
2019/05/15 HTML / CSS
Lacoste(法国鳄鱼)加拿大官网:以标志性的POLO衫而闻名
2019/05/15 全球购物
工厂厂长岗位职责
2013/11/08 职场文书
幼儿园小班教师寄语
2014/04/03 职场文书
事业单位考察材料范文
2014/12/25 职场文书
受资助学生感谢信
2015/01/21 职场文书
行政答辩状范文
2015/05/21 职场文书
公司借条范本
2015/05/25 职场文书
成绩单家长意见
2015/06/03 职场文书
答谢酒会主持词
2015/07/02 职场文书
浅谈如何提高PHP代码的质量
2021/05/28 PHP
PHP设计模式(观察者模式)
2021/07/07 PHP
收音机爱好者玩机13年,简评其使用过的19台收音机
2022/04/30 无线电