Node聊天程序实例05:index.html和style.css

作者:vousiu

出处:http://www.cnblogs.com/vousiu

本实例参考自Mike Cantelon等人的《Node.js in Action》一书。

index.html

style.css

body {

  padding: 50px;

  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;

}

a {

  color: #00B7FF;

}

#content {

  width: 800px;

  margin-left: auto;

  margin-right: auto;

}

#room {

  background-color: #ddd;

  margin-bottom: lem;

}

#messages {

  width: 690px;

  height: 300px;

  overflow: auto;

  background-color: #eee;

  margin-bottom: 1em;

  margin-right: 10px;

}

#room-list {

  float: right;

  width: 100px;

  height: 300px;

  overflow: auto;

}

#room-list div {

  border-bottom: 1px solid #eee;

}

#room-list div:hover {

  background-color: #ddd;

}

#send-message {

  width: 700px;

  margin-bottom: 1em;

  margin-right: 1em;

}

#help {

  font: 10px "Lucida Grande", Helvetica, Arial, sans-serif;

}
时间: 2024-10-10 07:27:13

Node聊天程序实例05:index.html和style.css的相关文章

Node聊天程序实例01

作者:vousiu 出处:http://www.cnblogs.com/vousiu 本实例参考自Mike Cantelon等人的<Node.js in Action>一书. 本实例要实现如下一个聊天App.左上的“Winter”为显示的房间的名字.中间为聊天消息,斜体字为系统消息,非斜体为聊天内容.右侧为房间列表,点击房间名可以进入房间.在下方输入框输入内容后,点击“提交”则可以发送聊天信息,或者发送更改昵称和更换房间的指令. 整个程序的架构图如下: 文件目录结构如下所示: 其中,socke

Node聊天程序实例04:chat_ui.js

作者:vousiu 出处:http://www.cnblogs.com/vousiu 本实例参考自Mike Cantelon等人的<Node.js in Action>一书. 这个程序在客户端浏览器运行.负责对UI操作的响应和与chat_server的通信.

Node聊天程序实例02:chat_server.js

作者:vousiu 出处:http://www.cnblogs.com/vousiu 本实例参考自Mike Cantelon等人的<Node.js in Action>一书. chat_server.js: 客户端和服务端就是不断通过socket.io事件来通信: chat_server ---------------> chat_ui chat_server <--------------- chat_ui 其中的这一段: socket.on('rooms', function(

Node聊天程序实例06:server.js

作者:vousiu 出处:http://www.cnblogs.com/vousiu 本实例参考自Mike Cantelon等人的<Node.js in Action>一书. server.js 跟前文所说过的原因一样,我认为此处的cache可以不作为参数传进来.此处由于是传引用因此不影响.但若传的是形参则cache的值不是最新的,因为在后一个异步函数加入异步队列时,异步队列中前一个函数还没有运行:等它运行了将cache的值改变了,而后一个异步函数的形参值仍然是旧值,这就将造成多余的读硬盘.

Node.js + Web Socket 打造即时聊天程序嗨聊

前端一直是一块充满惊喜的土地,不仅是那些富有创造性的页面,还有那些惊赞的效果及不断推出的新技术.像node.js这样的后端开拓者直接将前端人员的能力扩大到了后端.瞬间就有了一统天下的感觉,来往穿梭于前后端之间代码敲得飞起,从此由前端晋升为'前后端'. 图片来自G+ 本文将使用Node.js加web socket协议打造一个网页即时聊天程序,取名为HiChat,中文翻过来就是'嗨聊',听中文名有点像是专为寂寞单身男女打造的~ 其中将会使用到express和socket.io两个包模块,下面会有介绍

boost asio异步读写网络聊天程序客户端 实例详解

// // chat_client.cpp // ~~~~~~~~~~~~~~~ // // Copyright (c) 2003-2013 Christopher M. Kohlhoff (chris at kohlhoff dot com) // // Distributed under the Boost Software License, Version 1.0. (See accompanying // file LICENSE_1_0.txt or copy at http://ww

详解Node.js API系列C/C++ Addons(3) 程序实例

http://blog.whattoc.com/2013/09/08/nodejs_api_addon_3/ 再续前文,前文介绍了node.js 的addon用法和google v8 引擎,下面,我们进入真正的编码,下面将会通过六个例子,学习node addon 范例,了解addon编程的特性 创建一个空项目 随机数模块 向模块传递参数 回调函数处理 线程处理 对象管理 创建一个空项目 vi modulename.cpp #include <node.h> void RegisterModul

微信小程序实例教程(一)

序言 开始开发应用号之前,先看看官方公布的「小程序」教程吧!(以下内容来自微信官方公布的「小程序」开发指南) 本文档将带你一步步创建完成一个微信小程序,并可以在手机上体验该小程序的实际效果.这个小程序的首页将会显示欢迎语以及当前用户的微信头像,点击头像,可以在新开的页面中查看当前小程序的启动日志. 1. 获取微信小程序的 AppID 首先,我们需要拥有一个帐号,如果你能看到该文档,我们应当已经邀请并为你创建好一个帐号.注意不可直接使用服务号或订阅号的 AppID. 利用提供的帐号,登录https

用c#开发安卓程序 (xamarin.android)系列之二 简单的聊天程序

networkcomm.net 网络通信框架来自于英国剑桥,其开源版本2.3.1 中自带了一个编写android的例子,可以很好的帮助我们入门. 此示例的功能,是在2个安卓手机上,输入对方的IP和端口,能够实现聊天功能. 把代码放上,供大家一览 using System; using Android.App; using Android.Content; using Android.Runtime; using Android.Views; using Android.Widget; using