node.js做的聊天室 - FreeOZ论坛

<body style="min-height:100px;">
<div style="margin:auto;height:100%;padding:5px; position:relative;">
<button onclick="clearBoard()" type="button"
style="top:10px; right:22px;position:absolute;z-index:1000;">Clear</button>
<div id="board"> </div>
<div class="input">
<input style="width:80px;" id="nameBox" /><label style="width:20px;">></label><input style="width:calc(100% - 100px);" id="msgBox" />
</div>
</div>
<script>
var params = {}
location.search.substr(1).split("&").forEach(function (item) { params[item.split("=")[0]] = item.split("=")[1] })
nameBox.value = params.name || 'anonymous';
var socket = io.connect();
socket.on('news', function (data) {
var item = document.createElement('div');
item.className='item';
item.innerHTML = data;
board.appendChild(item);
setTimeout(function () {
item.style.height = '2em';
scroll.hide();
}, 1)
setTimeout(function () {
item.style.height = 'auto';
board.scrollTop = board.scrollHeight - board.clientHeight;
}, 200)
setTimeout(function () {
scroll.update();
}, 400)
});
msgBox.addEventListener('keydown', function (evt) {
if (13 == evt.keyCode) {
socket.emit('msg', nameBox.value + ': ' + msgBox.value);
msgBox.value = '';
msgBox.focus();
if (window.isMobile) {
document.querySelector('button').focus();
}
}
})
msgBox.focus();
function clearBoard() {
var items = board.querySelectorAll('.item');
for(var i=0;i<items.length;i++){
board.removeChild(items[i]);
}
msgBox.focus();
}
var scroll = addScroll(board);
</script>
</body>

复制代码

<script>
function MyCtrl($scope){
$scope.items = [];
var socket = io.connect();
socket.on('news', function (data) {
$scope.items.push(data);
$scope.$apply();
});
$scope.keypress = function (ev) {
if (ev.which == 13) {
var msg = $scope.nameBox + ': ' + $scope.msgBox;
socket.emit('msg', msg);
$scope.msgBox = '';
//$scope.items.push(msg);
}
}
$scope.clear = function () {
$scope.items.length = 0;
}
//msgBox
var params = {}
location.search.substr(1).split("&").forEach(function (item) { params[item.split("=")[0]] = item.split("=")[1] })
$scope.nameBox = params.name || 'anonymous';
}
</script>
</head>
<body style="min-height:100px;" ng-controller="MyCtrl">
<div style="margin:auto;height:100%;padding:5px; position:relative;">
<button type="button" ng-click="clear()"
style="top:20px; right:22px;position:absolute;z-index:1000;">
Clear
</button>
<div id="board">
<div ng-repeat="item in items" class="item">{{item}} </div>
</div>
<div class="input">
<input style="width:80px;" id="nameBox" ng-model="nameBox" /><label style="width:20px;">></label><input style="width:calc(100% - 100px);" id="msgBox" ng-model="msgBox" ng-keypress="keypress($event)" />
</div>
</div>
</body>

复制代码