这里有新鲜出炉的 AngularJS Tutorial 中文版,程序狗速度看过来!
AngularJS 诞生于 Google 是一款优秀的前端 JS 框架,已经被用于 Google 的多款产品当中。AngularJS 有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入,等等。
本篇文章主要介绍了 angular 中使用 Socket.io 实例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
服务端 (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();
- }
- }
来源: http://www.phperz.com/article/17/0816/338872.html