<!DOCTYPE html> <html ng-app="chatApp"> <head> <meta content="width=device-width, user-scalable=no"> </head> <body ng-controller="InitCtrl"> <div ng-view></div> <script src="https://www.jb51.net/lib/angular.js"></script> <script src="https://www.jb51.net/lib/angular-route.js"></script> <script src="https://www.jb51.net/lib/socket.io.js"></script> <script src="https://www.jb51.net/article/app.js"></script> <script src="https://www.jb51.net/controllers/InitCtrl.js"></script> </body> </html>
怎样构建一个单页应用？单页应用的原理？
先谈谈单页应用的原理。所谓单页，并不是整个页面无刷新。当你审查一下google chrome的console控制台的时候，你会发现，angular内部还是采用了ajax去异步请求资源。所以只是局部刷新。但是这种方式相对于以前的DOM节点的删除和修改已经有很大的进步了。
构建单页应用，我们需要借助于angular-route.js。这个angular子项目可以帮助我们定义路由和对应的逻辑处理控制器。利用它，我们可以实现一个单页应用。
app.js
/** * 客户端（目前只支持浏览器，将来会扩展到移动端）程序入口文件 * 创建一个模块，并且命名为chatApp * 配置路由，实现单页应用(single page application) */ var chatApp = angular.module("chatApp", ['ngRoute']); // 路由配置 chatApp.config(function($routeProvider) { $routeProvider.when('https://www.jb51.net/', { templateUrl : 'views/init.html', controller: 'InitCtrl' }) .when('/init', { templateUrl : 'views/init.html', controller: 'InitCtrl' }); });
客户端聊天界面的代码逻辑如下
InitCtrl.js
/** * # InitCtrl */ angular.module('chatApp').controller('InitCtrl', function($scope) { var socket = io.connect('http://127.0.0.1:3000'); socket.on('nameResult', function(result) { var message; if (result.success) { message = 'you are now known as ' + result.name + '.'; console.log('message=', message); document.getElementById('guestname').innerHTML = message; } else { message = result.message; } }); socket.on('joinResult', function(result) { document.getElementById('room').innerHTML = result.room; }); $scope.sendMessage = function() { var message = { room: 'Lobby', text: document.getElementById('user_input').value }; socket.emit('message', message); }; socket.on('message', function(message) { var p = document.createElement('p'); p.innerHTML = message.text; document.getElementById('message').appendChild(p); }); });
基于node.js和socket.io搭建多人聊天室
刚学node.js，想着做点东西练练手。网上的东西多而杂，走了不少弯路，花了一天时间在调代码上。参考网上的一篇文章，重写了部分代码，原来的是基于基于node-websocket-server框架的，我没用框架，单单是socket.io。
一、基本功能
1、用户随意输入一个昵称即可登录
2、登录成功后
1) 对正在登录用户来说，罗列所有在线用户列表，罗列最近的历史聊天记录
2) 对已登录的用户来说，通知有新用户进入房间，更新在线用户列表
3、退出登录
1)支持直接退出
2) 当有用户退出，其他所有在线用户会收到信息，通知又用户退出房间，同时更新在线用户列表
4、聊天
1) 聊天就是广播，把信息广播给所有连接在线的用户
5、一些出错处理
1) 暂时简单处理了系统逻辑错误、网络出错等特殊情况的出错提示
问题：功能不完善，有bug(退出后，新用户重新登录，还是原来的用户) 。抽空完善吧
二、技术介绍
socket.io(官网：)是一个跨平台，多种连接方式自动切换，做即时通讯方面的开发很方便，而且能和expressjs提供的传统请求方式很好的结合，即可以在同一个域名，同一个端口提供两种连接方式：request/response, websocket(flashsocket,ajax…)。
这篇文章对socket.io的使用做了详细介绍：https://www.jb51.net/article/71361.htm
三、注意事项
（1）客户端这样引用socket.io.js：
<script src="https://www.jb51.net/socket.io/socket.io.js"></script>
可能会加载失败（我在这里耗了不少时间）
可以改为：
<script src="https://ip:port/socket.io/socket.io.js"></script>
(对应服务器的ip地址和端口号，比如说localhost和80端口)
（2）实现广播的时候，参考官网的写法，竟然不起作用，如：