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


Posted in Javascript onNovember 19, 2015

先给大家展示效果图:

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事件冒泡传递(cancelBubble 、stopPropagation)
May 08 Javascript
javascript插入样式实现代码
Feb 22 Javascript
javascript实现获取浏览器版本、操作系统类型
Jan 29 Javascript
jquery之别踩白块游戏的简单实现
Jul 25 Javascript
jQuery Dialog 打开时自动聚焦的解决方法(两种方法)
Nov 24 Javascript
使用Bootstrap美化按钮实例代码(demo)
Feb 03 Javascript
jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
Apr 03 jQuery
React Native仿美团下拉菜单的实例代码
Aug 08 Javascript
基于vue组件实现猜数字游戏
May 28 Javascript
vue实现通讯录功能
Jul 14 Javascript
Vue-Quill-Editor富文本编辑器的使用教程
Sep 21 Javascript
Mint UI实现A-Z字母排序的城市选择列表
Dec 28 Javascript
Jquery实现仿京东商城省市联动菜单
Nov 19 #Javascript
javascript实现二级级联菜单的简单制作
Nov 19 #Javascript
jquery通过扩展select控件实现支持enter或focus选择的方法
Nov 19 #Javascript
javascript中checkbox使用方法实例演示
Nov 19 #Javascript
jquery实现表格隔行换色效果
Nov 19 #Javascript
javascript设计简单的秒表计时器
Sep 05 #Javascript
跟我学习javascript的定时器
Nov 19 #Javascript
You might like
PHP 的ArrayAccess接口 像数组一样来访问你的PHP对象
2010/10/12 PHP
php中判断字符串是否全是中文或含有中文的实现代码
2011/09/16 PHP
PHP答题类应用接口实例
2015/02/09 PHP
php版微信公众账号第三方管理工具开发简明教程
2016/09/23 PHP
传智播客学习之java 反射
2009/11/22 Javascript
通过正则格式化url查询字符串实现代码
2012/12/28 Javascript
Javascript 按位与赋值运算符 (&amp;=)使用介绍
2014/02/04 Javascript
通过JS来动态的修改url,实现对url的增删查改
2014/09/01 Javascript
jquery调取json数据实现省市级联的方法
2015/01/29 Javascript
JavaScript从数组中删除指定值元素的方法
2015/03/18 Javascript
jQuery关键词说明插件cluetip使用指南
2015/04/21 Javascript
全面解析JavaScript的Backbone.js框架中的Router路由
2016/05/05 Javascript
JS HTML图片显示Canvas 压缩功能
2017/07/21 Javascript
JavaSctit 利用FileReader和滤镜上传图片预览功能
2017/09/05 Javascript
Vue中div contenteditable 的光标定位方法
2018/08/25 Javascript
nuxt.js中间件实现拦截权限判断的方法
2018/11/21 Javascript
jquery 键盘事件 keypress() keydown() keyup()用法总结
2019/10/23 jQuery
layui清除radio的选中状态实例
2019/11/14 Javascript
JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效果
2020/03/17 Javascript
js实现点击按钮随机生成背景颜色
2020/09/05 Javascript
浅谈Python实现贪心算法与活动安排问题
2017/12/19 Python
详解Python Matplotlib解决绘图X轴值不按数组排序问题
2019/08/05 Python
python使用turtle库绘制奥运五环
2020/02/24 Python
Python 通过正则表达式快速获取电影的下载地址
2020/08/17 Python
CSS3属性box-shadow使用指南
2014/12/09 HTML / CSS
简单html5代码获取地理位置
2014/03/31 HTML / CSS
Gloeilampgoedkoop荷兰:在线购买灯泡
2019/02/16 全球购物
迪士尼西班牙官方网上商店:ShopDisney西班牙
2020/02/02 全球购物
三个Unix的命令面试题
2015/04/12 面试题
毕业实习个人鉴定范文
2013/12/10 职场文书
教师师德反思材料
2014/02/15 职场文书
职工擅自离岗检讨书
2014/09/23 职场文书
2015年教师党员自我评价材料
2015/03/04 职场文书
大国崛起日本观后感
2015/06/02 职场文书
MySQL kill不掉线程的原因
2021/05/07 MySQL
pandas中对文本类型数据的处理小结
2021/11/01 Python