Node.js中使用socket创建私聊和公聊聊天室

先给大家展示效果图:

在上篇文章给大家介绍使用Angular和Nodejs、socket.io搭建聊天室及多人聊天室,本文继续介绍Node.js中使用socket创建私聊和公聊聊天室,具体详情请看下文吧。

nodejs的应用中,关于socket应该是比较出彩的了,socket.io在github上有几万人的star,它的成功应该是不输于express的,为了方便了解整个socket.io的使用.

例子请点击http://chat.lovewebgames.com/

源码下载https://github.com/tianxiangbing/chat

由于本人太穷,所以服务器和数据库都是使用的国外免费的,访问速度上可以会稍慢。

先说下我对socket.io的理解,websocket更像是开启了一个端口服务,来监视过往的通讯。所以我们可以依赖于当前站点80端口启socket服务,也可以放于其他端口上,比如:

复制代码 代码如下:

 require('socket.io').listen(3000);

这样就是监视3000端口了,由于我用的免费服务器,没有权限打开其他端口,所以,我还是使用80了,由于80已经被express使用了,所以我只好在express使用的时候传进来了。

复制代码 代码如下:

 var server = http.createServer(app);
 var socket = require(‘./socket/msg')(server);

然后 我在msg.js里是这样写的

复制代码 代码如下:

var db = require('../db/mysql');
var sio = require('socket.io');
var IO = function(server) {
var io = sio.listen(server)

这样就和谐了,db是创建mysql连接的方法,不在本节内容里,略。

在socket.io里是这样的,首先创建一个io通道的连接,然后监视里面的socket的事件,nodejs是事件驱动嘛。代码如下:

复制代码 代码如下:

io.on('connection', function(socket) {
        console.log('a user connected.');
        socket.on('disconnect', function() {
            console.log('user disconnected.');
        });
})

这时只要有用户连接上,就会进入connection中了,然后它的参数是个socket,如果是公聊,我们可以直接用

复制代码 代码如下:

io.emit('chat message', {});

这种形式了。但我们这里是私聊,所以我们要临时的把这个socket对象保存在全局里,供与你私聊的对象使用找到你的socket,很绕口,其实这里的私聊,不算完全的点对点,它还是经过了服务器的,消息传给服务器,服务器再找到你要传达给的那个人的socket对象,发给他。这就是整个的过程了。这里我使用的是一个类数组对象来存储的.

复制代码 代码如下:

var users = {},
usocket = {};
socket.on('user join', function(data) {
    users[username] = username;
    usocket[username] = socket;
})

由于我这里需要用户名登录,所以我就把用户名作为了唯一的标识(这只是一个例子,不要跟我谈用户名重复的情况),这里用类数组的形式的好处就是我不用循环也能够很快的找到它。再我给A发送私聊时,我会先在这个uscoket里面找到它,然后调用它的emit。

function sendUserMsg(data) {
 if (data.to in usocket) {
 console.log('================')
 console.log('to' + data.to, data);
 usocket[data.to].emit('to' + data.to, data);
 usocket[data.user].emit('to' + data.user, data);
 console.log('================')
 }
}

这里我emit了两次的原因是,我发给对方消息的同时,我自己也要收到这个消息,然后把它显示出来,为什么这样?其一,接口统一了,聊天里的内容全是服务器过来的,其二,证明我发送成功了。

然后我在客户端监听时,也用我自己的用户名起了一个to+用户名的事件监听。

socket.on('to' + user, function(data) {
 //console.log(data);
 formatMsg(data);
})

这样,不管是我发的消息,还是我收到消息,都会进入这个事件了。最后,在用户离开的时候别忘记delete掉这个对象。

socket.on('disconnect', function() {
 console.log('disconnect')
 if (username) {
 counter--;
 delete users[username];
 delete usocket[username];
 if (home.name == username) {
  homeLeave(username);
 }
 sendmsg({
  type: 0,
  msg: "用户<b>" + username + "</b>离开聊天室",
  counter: counter,
  users: users
 })
 }
});

好了,这样就大功告成了。

本页内容版权归属为原作者,如有侵犯您的权益,请通知我们删除。
JavaScript语言的基本语法要求有哪些呐?下面将为大家一一解答: 一、区分大小写 JavaScript语言区分字符大小写,两个字符串相同大小写不同,被认为是不同的字符串。 JavaScript语言的关键字也区分大小写,按语法要求应小写。 二、书写格式 JavaScript语言忽略语句间空白,即语句间的空格,空行,缩进等。 为了提高程序的可读性,应当使用这些格式,使程序更加清晰,可读性更高。 三、注释语句 为了提高程序的可维护性和可读性,应当有一定的注释语句, 它是给读程序的人员看的,有单行注释和多行

Jquery 全选反选实例代码 - 2015-11-21 14:11:38

本文给大家分享一段基于jQuery的全选、反选和不选功能的代码,适用于网页多选后需要进行批量操作的场景(如批量删除等)。文章结合实例,代码简洁,基本覆盖选项选择操作的方方面面,希望可以帮到有需要的WEB爱好者。 //全选 全不选 $('#checkAll').click(function () { //判断是否被选中 var bischecked = $('#checkAll').is(':checked'); var fruit = $('input[name="check"]'); bischecke
1、面向对象的工厂方法 function createPerson(name, age, job){ var o = new Object(); o.name = name; o.age = age; o.job = job; o.sayName = function(){ alert(this.name); }; return o; } var person1 = createPerson("Nicholas", 29, "Software Engineer"); var person2 = creat
Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的诧异了。 推荐一篇不错的jQuery Ajax 实例文章,忘记了可以去看看, 地址为: http://www.cnblogs.com/yeer/archive/2009/07/23/1529460.html 和 http://www.w3school.com.cn/jquery/ $.post、$.get是一些简单的方法,如果要处理复杂的逻辑,还是需要用到jQuery.ajax() 一、$.aj
废话不多说了,先给大家贴一段代码看看吧, $.ajax({ type: "post", url: url, dataType:'html', success: function(data) { }, complete: function(XMLHttpRequest, textStatus) { }, error: function(){}}); success : 当请求成功时调用的函数。这个函数会得到一个参数:从服务器返回的数据。当请求成功时调用函数,即status==200。 complete :当
在上篇文章给大家介绍了 jQuery-1.9.1源码分析系列(十)事件系统之事件体系结构 ,本篇继续给大家介绍jquery1.9.1源码分析系列相关知识,具体内容请看下文吧。 首先需要明白,浏览器的原生事件是只读的,限制了jQuery对他的操作。举个简单的例子就能明白为什么jQuery非要构造一个新的事件对象。 在委托处理中,a节点委托b节点在a被click的时候执行fn函数。当事件冒泡到b节点,执行fn的时候上下文环境需要保证正确,是a节点执行了fn而非b节点。如何保证执行fn的上下文环境是a节点的:看
基于jQuery表格增加删除代码是一款动态增加删减表格行特效代码。分享给大家供大家参考。具体如下: 运行效果截图如下: 具体代码如下: html代码: div table id="tab11" tbody tr td height="30" align="center" input type="text" name="NO" size="2" value="1" / /td td align="center" input type="text" name="start_end_time" / /td td

jquery实现手风琴效果 - 2015-11-21 14:11:30

本文实例讲述了jquery实现手风琴效果的代码。分享给大家供大家参考。具体如下: 效果过程就是当鼠标覆盖图片时,这张图片的宽度变大,其他兄弟图片宽度变小,效果如下: 具体代码如下 !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"html xmlns="http://www.w3.org/1999/xhtml"headme
假如现在有这样一个表单,是添加元素用的。 form id='addForm' action='UserAdd.action' type='post' label for='uname'用户名/label:input type='text' name='uname' id='uname'br label for='mobileIpt'手机号:/labelinput type='text' name='mobileIpt' id='mobileIpt'br label for='birthday'生日:/la

Jquery ajax基础教程 - 2015-11-21 14:11:28

jQuery的Ajax带来了无需刷新的web页面革命。这里就详细介绍一下jQuery所涉及到的Ajax操作。(无需特殊说明,均需要有服务器配置,这里本人用的是Tomcat 7) 1.基于请求加载文件数据 这里的请求通常都是网页的某些操作,如点击等。 而其加载数据的类型归类为以下四种:a.加载HTML文件;b.加载JSON文件;c.加载Javascript文件;d.加载XML文件。 其对应的四种加载方法分别是:load、getJSON、getScript、get。 a.加载HTML文件 把编写好的HTML文