澳门新萄京8522:使用Angular和Nodejs、socket.io搭建聊天室及几人聊天室

node+websocket 实时聊天实例教程

 近期,负担的游玩要求一个推抢功用,由于是实时的谈天,便想到了当今挺火的websocket,折腾了一天一夜,总算有一些眉目了,今后总计如下:

websocket
是html5一个通信合同,能够实时通讯。本例的谈天是用的socket的框架socket.io完结的,socket.io
集成了websocket和xhr-polling(长轮询)等各种通讯格局
1.搭建node环境
从node官方网址,本身选用的window的msi 一键安装.安装完node
之后还需计划种类情况变量 PATH 属性里增添上你的测量试验地点路线. biu~ biu~

2.安装socket.io
用npm install-g socket.io 命令
或许从socket.io官方网站下载文件放到node_modules文件夹里面

 

3.服务端代码 server.js

/
 * modules引入
 */
var express = require('express'),
 sio = require('socket.io'),
 fs=require('fs'),
 path = require('path')
 url = require('url');

//=========================app配置=============================
/**
 * app配置
 */
var app = module.export = express.createServer();
//=================配置socket.io=========================
/**
 * 配置socket.io
 *
 */
var io = sio.listen(app);
// assuming io is the Socket.IO server object
io.configure(function () {
  ///io.set("transports", ["websocket"]);
});

//===================socket链接监听=================
/**
 * 开始socket链接监听
 * @param {Object} socket
 */
io.sockets.on('connection', function (socket){
 //公共信息
 socket.on('public message',function(msg, fn){
  socket.broadcast.emit('public message',msg);
  fn(true);
 });

 //掉线,断开链接处理
 socket.on('disconnect', function(){
  socket.broadcast.emit('public message','</pre>
断开连接。。。
<pre class="javascript">');
 });

});

app.listen(3000, function(){
 var addr = app.address();
 console.log('app listening on http://127.0.0.1:' + addr.port);
});

4.客商端代码 chat.html

<!--<script src="/js/jquery.js"></script>
<script src="/js/socket.js"></script>--><script type="text/javascript">// <![CDATA[
$(function(){

 var socket = io.connect('http://localhost:3000');

 //开始连接服务器
 socket.on('connect', function(){
  $('#connecting').fadeOut();
  show('连接服务器成功')
 });

 // 接收public message
 socket.on('public message', function(msg){
  show(msg);
 });

 $('#btn').click(function(){
  var msg = $('#content').val();
  // 发送公共消息 public message
  socket.emit('public message', msg, function(ok){
   if (ok) {

    show(msg);
   }
  });

 });

});

function show(msg){
 var htm ="

<div class='message'>"+msg+"</div>

";
 $('#main').append(htm);
}
// ]]></script></pre>
<div id="main">
<div id="connecting">正在连接服务器..</div>
&nbsp;

</div>
<div id="send"><input id="content" type="text" /><button id="btn">发送</button></div>

5.先运行 服务端 命令:node server.js

澳门新萄京8522 1

客服端访谈client.html地址举个例子
下面 是 Firefox和chrome的结果
澳门新萄京8522 2澳门新萄京8522 3
ps:近来firebox不协助websocket研究,用的是xhr-polling
,chrome用的是专门的工作的websocket左券
上边从node服务器截取的图样
澳门新萄京8522 4
当今websocket的正规还没规定,差别浏览器对抓手球组织议协助的不等。
总来说之未来用websocket 是不推荐的,biu~biu~

实时闲谈实例教程
近日,负担的游戏须要贰个聊天功效,由于是实时的推抢,便想到了现在挺火的websocket,折腾了一天一夜,总…

sudo apt-get install npm

缘何需求socket.io?

        为何接纳websocket?

先是创设server端(服务端)代码(文件test.js):

1.
行使configure方法配置差别的运作意况下的一颦一笑;正是说在分化的条件下,启用区别的铺排选项。configure的首先个参数是运作条件,第4个参数是开展示公布局的function。运行遭逢卓越的如production恐怕是development,当然这里能够使放肆的字符串。要是configure的率先个参数省略的话,表明前面包车型地铁布署是公用的,不管是怎么样意况下,都使得。

      
事实上每趟财富文件央求的进度是一次次GET央浼。上面小编解释一下顾客端(浏览器端可能应用linux下采用curl格局)的GET乞请所对应的服务端处理进程。二次Get伏乞发送到服务端后,服务端能够依据GET伏乞对应二个财富文件的渠道。知道了那个门路后,我们就足以采用文件读写的法子得到钦点路径下的能源,然后重临给顾客端。

Socket.IO aims to make realtime apps possible in every browser and
mobile device, blurring the differences between the different transport
mechanisms. It’s care-free realtime 100% in JavaScript. In order to
provide realtime connectivity on every browser, Socket.IO selects the
most capable transport at runtime, without it affecting the API.
WebSocket Adobe® Flash® Socket AJAX long polling AJAX multipart
streaming Forever Iframe JSONP Polling

var io = require('socket.io').listen(80);
//Server
var chat = io
 .of('/chat')
 .on('connection', function (socket) {
  socket.emit('a message', {
    that: 'only'
   , '/chat': 'will get'
  });
  chat.emit('a message', {
    everyone: 'in'
   , '/chat': 'will get'
  });
 });
var news = io
 .of('/news')
 .on('connection', function (socket) {
  socket.emit('item', { news: 'item' });
 });
//Client
<script>
 var chat = io.connect('http://localhost/chat')
  , news = io.connect('http://localhost/news');
 chat.on('connect', function () {
  chat.emit('hi!');
 });
 news.on('news', function () {
  news.emit('woot');
 });
</script>

澳门新萄京8522 5

websocket是html5的专门的学业,也属于反ajax本事。

socket.io Wiki:

        Websocket则完全差异。
websocket是依照长链接。就是顾客端和服务端一旦确立链接之后,那些链接就能够直接存在。
是一种全双工的通讯。 这年的建制有一点点类似发表-订阅格局。
客商端会订阅一些平地风波,一旦服务端有新的多少出现,会积极推送给客商端。

复制代码 代码如下:

   
socket.io的布署很简短,假如安顿过express的话,你会意识它们大约是采用大致的点子。先看个小例子:

chatServer.listen(server);

io.sockets.on(‘connection’, function (socket) {
socket.emit(‘news’, { hello: ‘world’ });
socket.on(‘my other event’, function (data) {
console.log(data);
});
});

var io = require('socket.io').listen(80);
io.configure('production', function(){
 io.enable('browser client etag');
 io.set('log level', 1);
 io.set('transports', [
  'websocket'
 , 'flashsocket'
 , 'htmlfile'
 , 'xhr-polling'
 , 'jsonp-polling'
 ]);
});
io.configure('development', function(){
 io.set('transports', ['websocket']);
});

一,利用Node搭建静态服务器

$ nodejs test.js

   
socket.io设计的对象是支撑其余的浏览器,任何Mobile设备。近日支撑主流的PC浏览器(IE,Safari,Chrome,Firefox,Opera等),Mobile浏览器(iphone
Safari/ipad Safari/android WebKit/WebOS WebKit等)。

2、登陆成功后

socket.io实现反向AJAX才能实例

var io = require('socket.io').listen(80);
io.sockets.on('connection', function (socket) {
 socket.broadcast.emit('user connected');
});

(2)落成广播的时候,参照他事他说加以考察官方网站的写法,竟然不起作用,如:

复制代码 代码如下:

socket.io介绍:

//监听3000端口

复制代码 代码如下:

能够看到,socket.io使用configure, set, enable, disable举办配备。

2) 对已登陆的客商来讲,公告有新客户步向房间,更新在线客商列表

澳门新萄京8522 6上图来自firebug,申明了客户端index.php连接服务端test.js后摄取了来自服务端test.js的数量{hello:”world”}。同期也能够见到index.php访谈server的网站并不是轻松的
澳门新萄京8522 7
上海教室展现了服务端test.js的管理进程。
澳门新萄京8522 8上图是顾客端index.php第三回向劳动端test.js发送的http头。
澳门新萄京8522 9

3.
socket.io能够一贯通过send方法发送消息,使用message事件接收音讯,比方:

  二,服务端利用WebSocket营造聊天室服务端

分析截至。

8.
能够在平等次链接中,创设多少个相互独立的通道,而不是创立数十次链接。那么些官方叫法是“多个namespace”,例如官方的例子:

新兴看了这几个:

安装node.js:

var io = require('socket.io').listen(80);
io.sockets.on('connection', function (socket) {
 io.sockets.emit('this', { will: 'be received by everyone'});
});

1)援助直接退出

在实时web应用中,常见的主意是反向Ajax。反向Ajax的定义:

安装

下一场在浏览器中开采index.html,要是浏览器(ff、Chrome)不援助,请晋级到支撑WebSocket的版本.

运转客商端并张开察看:张开浏览器,进入

注意事项

server.js

运行server端:

<script src="http://cdn.socket.io/stable/socket.io.js"></script>
/**
 * mime类型的 map
 * @ author Cheng Liufeng
 * @ date 2014/8/30
 * 当请求静态服务器文件的类型 html, css, gif, jpg, png, javascript, json, plain text, 我们会在此文件进行映射
 */
exports.types = {
 "css": "text/css",
 "gif": "image/gif",
 "html": "text/html",
 "ico": "image/x-icon",
 "jpeg": "image/jpeg",
 "jpg": "image/jpeg",
 "js": "text/javascript",
 "json": "application/json",
 "pdf": "application/pdf",
 "png": "image/png",
 "svg": "image/svg+xml",
 "swf": "application/x-shockwave-flash",
 "tiff": "image/tiff",
 "txt": "text/plain",
 "wav": "audio/x-wav",
 "wma": "audio/x-ms-wma",
 "wmv": "video/x-ms-wmv",
 "xml": "text/xml"
};

</html>

    服务端编制程序还是与经平常服装务器同样,运营服务器,提供劳动,处监护人件。

/**
 * 客户端(目前只支持浏览器,将来会扩展到移动端)程序入口文件
 * 创建一个模块,并且命名为chatApp
 * 配置路由,实现单页应用(single page application)
 */
 var chatApp = angular.module("chatApp", ['ngRoute']);
 // 路由配置
 chatApp.config(function($routeProvider) {
 $routeProvider.when('/', {
  templateUrl : 'views/init.html',
  controller: 'InitCtrl'
 })
 .when('/init', {
  templateUrl : 'views/init.html',
  controller: 'InitCtrl'
 });
 });

以下示例来自官方网站并做了适宜修改。

  1. 在configure的配备函数中,我们得以选取set, enable,
    disable设置相关选项。

index.html

安装npm:

  1. 能够使用socket.io间接开发银行http服务。

四、效果图

反向Ajax本事主要有两点内容:一是劳动器端保持住TCP连接直到其有数据发送给客户端(能够利用循环和睡眠落成),二是顾客端js编制程序能力。

var io = require('socket.io').listen(80);
io.sockets.on('connection', function (socket) {
 socket.on('set nickname', function (name) {
  socket.set('nickname', name, function () { socket.emit('ready'); });
 });
 socket.on('msg', function () {
  socket.get('nickname', function (err, name) {
   console.log('Chat message by ', name);
  });
 });
});

app.js 

<html>
<head>
</head>
<script src=”socket.io.min.js”></script>
<body>
<script>
  var socket = io.connect(”);
  socket.on(‘news’, function (data) {
    console.log(data);
    console.log(data[“hello”]);
    socket.emit(‘my other event’, { my: ‘data’ });
  });
</script>
</body>

    socket.io基于node.js并简化了WebSocket
API,统一了各类通讯API。它帮忙:WebSocket, Flash Socket, AJAX
long-polling, AJAX multipart streaming, Forever IFrame, JSONP
polling。

当然,个人感到, angular在构建贰个单页应用和crud项目方面有不小的优势。
大家那一个聊天室正是依据SPA(single page application)的指标。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图