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 相关文章推荐
JS定时器实例详细分析
Oct 11 Javascript
控制文字内容的显示与隐藏示例
Jun 11 Javascript
深入理解JavaScript系列(26):设计模式之构造函数模式详解
Mar 03 Javascript
onclick和onblur冲突问题的快速解决方法
Apr 28 Javascript
jQuery实现可拖拽的许愿墙效果【附demo源码下载】
Sep 14 Javascript
深入浅析JS是按值传递还是按引用传递(推荐)
Sep 18 Javascript
jquery操作checkbox火狐下第二次无法勾选的解决方法
Oct 10 Javascript
js,jq,css多方面实现简易下拉菜单功能
May 13 Javascript
详解vuex 中的 state 在组件中如何监听
May 23 Javascript
微信小程序 功能函数小结(手机号验证*、密码验证*、获取验证码*)
Dec 08 Javascript
微信小程序实现的五星评价功能示例
Apr 25 Javascript
何时/使用 Vue3 render 函数的教程详解
Jul 25 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
ThinkPHP使用PHPExcel实现Excel数据导入导出完整实例
2014/07/22 PHP
Thinkphp多文件上传实现方法
2014/10/31 PHP
php实现数字补零的方法总结
2018/09/12 PHP
php的扩展写法总结
2019/05/14 PHP
用nodejs访问ActiveX对象,以操作Access数据库为例。
2011/12/15 NodeJs
JavaScript监听文本框回车事件并过滤文本框空格的方法
2015/04/16 Javascript
简介JavaScript中strike()方法的使用
2015/06/08 Javascript
jquery捕捉回车键及获取checkbox值与异步请求的方法
2015/12/24 Javascript
ros::spin() 和 ros::spinOnce()函数的区别及详解
2016/10/01 Javascript
jQuery弹出层插件popShow(改进版)用法示例
2017/01/23 Javascript
Web前端框架Angular4.0.0 正式版发布
2017/03/28 Javascript
Node.js实现连接mysql数据库功能示例
2017/09/15 Javascript
浅谈Angular 中何时取消订阅
2017/11/22 Javascript
使用vue2实现带地区编号和名称的省市县三级联动效果
2018/11/05 Javascript
vue 使用v-for进行循环的实例代码详解
2020/02/19 Javascript
Node.js fs模块原理及常见用途
2020/10/22 Javascript
[42:39]老党炸弹人试玩视频
2014/09/03 DOTA
从零学Python之引用和类属性的初步理解
2014/05/15 Python
浅谈Python中列表生成式和生成器的区别
2015/08/03 Python
python表格存取的方法
2018/03/07 Python
Django中反向生成models.py的实例讲解
2018/05/30 Python
Python Opencv实现图像轮廓识别功能
2020/03/23 Python
Python实现钉钉订阅消息功能
2020/01/14 Python
python3发送request请求及查看返回结果实例
2020/04/30 Python
浅谈Selenium+Webdriver 常用的元素定位方式
2021/01/13 Python
wedgwood加拿大官网:1759年成立的英国国宝级陶瓷餐具品牌
2018/07/17 全球购物
Blue Nile中国官网:全球知名的钻石和珠宝网络零售商
2020/03/22 全球购物
Genny意大利官网:意大利高级时装品牌
2020/04/15 全球购物
4s店机修工岗位职责
2013/12/20 职场文书
优秀毕业生自荐信范文
2014/01/01 职场文书
挂牌仪式主持词
2014/03/20 职场文书
难忘的一天教学反思
2014/04/30 职场文书
宣传口号大全
2014/06/16 职场文书
个人先进事迹材料范文
2014/12/29 职场文书
2015毕业生自我评价范文
2015/03/02 职场文书
导游词之云南丽江古城
2019/09/17 职场文书