在这个例子中,其实node.js并没有真正起到服务器的作用,因为我们这里可以直接运行client.html文件,而不用输入url请求,当 然,要想输入url请求页面内容还需要加入请求静态文件的代码。这个实例中node.js最重要的作用就是将服务端迁移到了js,实现了客户端和服务端语 言上的统一,我们只要在浏览器上同时运行两个client.html客户端页面,即可进行简单的即是通讯了,socket.io才是我们真正用来实现即时 通讯的消息的收发。

var server = http.createServer(callback);//开启http服务

var io = require("socket.io").listen(server);//socketio来监听http服务器

接下来直接上客户端代码client.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>socketIO - Simple chat</title>
<script src="./socketio.js"></script>
<style>
* { font-family:tahoma; font-size:12px; padding:0px; margin:0px; }
p { line-height:18px; }
div { }
.textInput{width:500px;margin: auto;margin-top: 50px;}
#content { padding:5px; background:#ddd; border-radius:5px; overflow-y: scroll;
border:1px solid #CCC; height: 160px;width: 400px;float: left;}
#input { border-radius:2px; border:1px solid #ccc;
margin-top:10px; padding:5px; width:400px; }
#status { width:88px; display:block; float:left; margin-top:15px; }
.onlineList {
width: 200px;
height: 160px;
background-color: #ccc;
border: 1px solid #DDD;
margin-top: 50px;
margin-left: 420px;
}
li {
display: inline;border: 1px solid red;
}
.ul {
margin-left:auto; margin-right:auto;
width: 600px; }
</style>
</head>
<script type="text/javascript">
//window.onbeforeunload = disConnect;
</script>
<body>
<div class="ul">
<div id="content"></div>
<div class="onlineList">
当前在线:
<div id="list"> </div>
</div> </div> <div class="textInput">
<span id="status">connecting</span>
<input type="text" id="input" value="只能选择右上列表上的姓名进行登录"/>
</div> <script src="./jquery.js"></script>
<script src="./client.js"></script>
</body>
</html>

对应的client.js文件

    "use strict";

    // for better performance - to avoid searching in DOM
var content = $('#content');
var input = $('#input');
var statusObj = $('#status');
var userList = $("#list"); // my color assigned by the server
var myColor = false;
// my name sent to the server
var myName = false;
var connection = null;
var currentToUser = null;
connect();
window.onbeforeunload = beforeDisConnect;//监听浏览器关闭前的事件
window.onunload = disConnect;//监听浏览器关闭时 /**
* Send mesage when user presses Enter key
*/
input.keydown(function (e) {
if (e.keyCode === ) {
var msg = $(this).val();
if (!msg) {
return;
}
if (!myName) {
myName = msg;//定义名字
statusObj.text(myName);
input.val(""); if (connection) {
connection.json.send({ logicId: "login", username: myName });
}
return;
}
var time = new Date();
var tmpTime = time.getFullYear() + "-" + ((time.getMonth() < ? "" : "") + (time.getMonth() + )) + "-" + ((time.getDate() < ? "" : "") + time.getDate()) + " "
+ ((time.getHours() < ? "" : "") + time.getHours()) + ":" + ((time.getMinutes() < ? "" : "") + time.getMinutes()) + ":" + ((time.getSeconds() < ? "" : "") + time.getSeconds());
// send the message as an ordinary text
msg = { "@class": "test.EntityIn", logicId: "chat", username: myName, msg: input.val(),
to:currentToUser,time:tmpTime}; //alert(typeof(object));
connection.json.send(msg);
$(this).val('');
// disable the input field to make the user wait until server
// sends back response }
}); /**
* Add message to the chat window
*/
function addMessage(author, message, dt) {
content.prepend('<p><span>' + author + '</span> @ '+dt+ ': ' + message + '</p>');
} function connect() {
// open connection
connection = io.connect('http://127.0.0.1:1337', { 'reconnect': false });
connection.on('connect', function (data) {
// first we want users to enter their names
input.removeAttr('disabled');
statusObj.text('登录:');
connection.send();
}); connection.on("error", function (error) {
// just in there were some problems with conenction...
content.html($('<p>', {
text: 'Sorry, but there\'s some problem with your '
+ 'connection or the server is down.'
}));
}); // most important part - incoming messages
connection.on("message", function (message) {
var logicId = message.logicId;
if (logicId == 'conn_success') {//连接成功
var users = message.users;
for (var i = ; i < users.length; i++) {
userList.append('<a href="#" onclick="chatToSb(this.innerHTML)">'+users[i]+'</a></br>');
}
} else if (logicId == "chat") {
addMessage(message.from,message.msg,message.time);
}else if(logicId == "history"){
var historyMsgs = message.historyMsgs;
for(var i = ; i < historyMsgs.length; i++){
addMessage(historyMsgs[i].from,historyMsgs[i].msg,historyMsgs[i].time);
}
} });
} function chatToSb(username) {
currentToUser = username;
} function disConnect(){
connection.disconnect();
//alert("断开连接"); } function beforeDisConnect() {
return "确认离开";
}

接下来就是重头戏的服务端了server.js

    "use strict";  

    var http = require('http');  

    /**
* Global variables
*/
var history = [];
// list of currently connected clients (users)
var users = ["user1","user2"];
var clients = []; /**
* HTTP server
*/
var server = http.createServer(function (request, response) {
// Not important for us. We're writing socket.io server, not HTTP server
});
server.listen(); /**
* socketio server
*/
var io = require("socket.io").listen(server); //io监听socket事件
io.on('connection', function (connection) {
console.log((new Date()) + ' Connection from origin ' + connection.id + '.');
var json = { logicId:"conn_success",users: users };
connection.json.send(json);
var userName = false; console.log((new Date()) + ' Connection accepted.'); connection.on('message', function (message) {
console.log(message);
if (message.logicId == "login") {
clients[message.username] = connection; //将用户名与连接对应
connection.username = message.username;
}else if(message.logicId == "chat") {//用户发起会话
//1、查找该用户是否有历史消息
var toUser = message.to;//会话目标
var from = message.username;//会话发起人
if(history[toUser]&&history[toUser][from]){
var historyMsgs = [];
for (var i = ; i < history[toUser][from].length; i++) {
historyMsgs.push(history[toUser][from][i]);
};
connection.json.send({logicId:"history",historyMsgs:historyMsgs});
}
//2、检查目标用户是否在线,若在线,转发用户请求,否则,存为历史会话中
var objConnect = clients[toUser];
var chatJson = {logicId:"chat", from: from, time: message.time, msg: message.msg };
connection.json.send(chatJson);
if (objConnect) {
objConnect.json.send(chatJson);
} else {//存储于历史会话中
if (!history[from]||!history[from][toUser]) {
if (!history[from]) {
history[from] = [];
}
history[from][toUser] = [];
}
history[from][toUser].push(chatJson);
}
}
}); // user disconnected
connection.on('disconnect', function (socket) {
console.log("关闭连接:" + socket);
delete clients[connection.username];//删除用户的连接 }); });

这里都假设大家是在win7的环境下,并且装了node.js,方便调试的话还可以安装node-inspector调试工具,或者用 webStorm IDE,具体的可以参看我的前一篇博文,除了这三个文件当然还需要服务端和客户端的socket.io文件,node.js就是下载第三方包的方式了,客 户端的socket.io文件网上可以找到的。

接下来简单介绍一下以上代码实现的功能以及用法,打开页面后首先就是登录,由于例子比较简单,并没有单独的登录页面,直接在文本框中输入用户名,注 意(这里的用户名只能是user1或者user2,读者可以在server.js的users添加自己需要的用户名,这里其实是固定的),然后回车,就是 登录了,然后输入需要发送的信息,并且点击接受者的用户名,否则会接收者是空的,关闭页面的时候,我们会监听页面关闭事件,给服务端发送 disconnect事件,删除当前用户名的连接。根据这个流程,代码其实很简单,就不再详解了。

转载:http://blog.csdn.net/jiangcs520/article/details/11173749

node.js和socket.io纯js实现的即时通讯实例分享的更多相关文章

  1. Node.js 和Socket.IO 实现chat WEBIM

    socket官方:   http://socket.io/  需求:实现WEB IM功能,数据从服务器PUSH  不是PULL  websocket是基于HTML5的新特性,不兼容IE6,7,8 .. ...

  2. socket.io+angular.js+express.js做个聊天应用(三)

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/www19940501a/article/details/27590611 接着前面博客文章socke ...

  3. Node+Express+MongoDB + Socket.io搭建实时聊天应用

    Node+Express+MongoDB + Socket.io搭建实时聊天应用 前言 本来开始写博客的时候只是想写一下关于MongoDB的使用总结的,后来觉得还不如干脆写一个node项目实战教程实战 ...

  4. Node+Express+MongoDB + Socket.io搭建实时聊天应用实战教程(二)--node解析与环境搭建

    前言 本来开始写博客的时候只是想写一下关于MongoDB的使用总结的,后来觉得还不如干脆写一个node项目实战教程实战.写教程一方面在自己写的过程中需要考虑更多的东西,另一方面希望能对node入门者有 ...

  5. Node+Express+MongoDB+Socket.io搭建实时聊天应用实战教程(一)--MongoDB入门

    前言 本文并不是网上流传的多少天学会MongoDB那种全面的教程,而意在总结这几天使用MongoDB的心得,给出一个完整的Node+Express+MongoDB+Socket.io搭建实时聊天应用实 ...

  6. 使用Node.js的socket.io模块开发实时web程序

    首发:个人博客,更新&纠错&回复 今天的思维漫游如下:从.net的windows程序开发,摸到nodejs的桌面程序开发,又熟悉了一下nodejs,对“异步”的理解有了上上周对操作系统 ...

  7. node.js和socket.io实现im

    im——Instant Messaging 即时通讯 基本技术原理 (1)通过IM服务器登陆或注销 (2)用户A通过列表找到B,用户B获得消息并与之交谈 (3)通过IM服务器指引建立与B单独的通讯通道 ...

  8. [Node.js] 基于Socket.IO 的私聊

    原文地址:http://www.moye.me/2015/01/02/node_socket-io/ 引子 最近听到这么一个问题:Socket.IO 怎么实现私聊?换个提法:怎么定位到人(端),或者说 ...

  9. socket.io+angular.js+express.js做个聊天应用(四)

    接着上一篇 使用angularjs构建聊天室的client <!doctype html> <html ng-app="justChatting"> < ...

随机推荐

  1. C++对C的函数拓展

    一,内联函数 1.内联函数的概念 C++中的const常量可以用来代替宏常数的定义,例如:用const int a = 10来替换# define a 10.那么C++中是否有什么解决方案来替代宏代码 ...

  2. SSIS 处理NULL

    不同于SQL Server中NULL表示值是未知的(Unknown Value),没有数据类型,但是,在SSIS中,NULL是有数据类型的,要获取某一个NULL值,必须指定数据类型,例如,变量 Int ...

  3. logback配置详解3<filter>

    logback 常用配置详解(三) <filter> <filter>: 过滤器,执行一个过滤器会有返回个枚举值,即DENY,NEUTRAL,ACCEPT其中之一.返回DENY ...

  4. 第一天 django

    全栈增长工程师实战 http://growth-in-action.phodal.com/ 生成的代码和示例不一样,static 也要加上 from django.conf.urls import u ...

  5. ADT开发中的一些优化设置:代码背景色、代码字体大小、代码自动补全

    初学Android开发,在网上找到一些ADT工具的优化,自己设置好了,截图保存下来.免得以后忘了. 1. 设置背景颜色: 色调85.饱和度90.亮度205 RGB:199.237.204 2. 设置代 ...

  6. C++:undefined reference to vtable 原因与解决办法[转]

    [转]undefined reference to vtable 原因与解决办法 最近在写一套基础类库用于SG解包blob字段统计,在写完了所有程序编译时遇到一个郁闷无比的错误: MailBox.o( ...

  7. Ncurses <一>

    前言: 最好的ncurses教程是 ncurses HOWTO,网上有中文版 编译ncurses引用的程序,需要加编译参数 -lncurses 并在.c文件中包含 ncurses.h头文件 1. 启动 ...

  8. TensorFlow 深度学习笔记 从线性分类器到深度神经网络

    转载请注明作者:梦里风林 Github工程地址:https://github.com/ahangchen/GDLnotes 欢迎star,有问题可以到Issue区讨论 官方教程地址 视频/字幕下载 L ...

  9. Net::OpenSSH 使用例子

    [root@dr-mysql01 mojo]# cat a1.pl use Net::OpenSSH; my $host = '121.4xx.xx1.41'; my $user = 'root'; ...

  10. 避免内存重叠memmove()性能

    #include <iostream> #include <string.h> using namespace std; void* memmove(void *dst, co ...