WebSocket+node.js创建即时通信的Web聊天服务器


Posted in Javascript onAugust 08, 2016

本文实例node.js创建即时通信的Web聊天服务器,供大家参考,具体内容如下

1.使用nodejs-websocket
 nodejs-websocket是基于node.js编写的一个后端实现websocket协议的库,
 连接:https://github.com/sitegui/nodejs-websocket
 (1)安装
 在项目目录下通过npm安装:npm install nodejs-websocket
 (2)创建服务器

//引入nodejs-websocket
var ws = require(“nodejs-websocket”);
//调用createServer方法创建服务器,回调函数中的conn是connection的实例
var server = ws.create(function(conn){
  console.log(“New connection”);
  //监听text事件,text事件每当从服务器收到文本类型数据时触发,回调函数的参数为传过来的字符串
  conn.on(“text”, function(str){
 console.log(“Received ” + str);
  });
  //监听close事件,每次断开连接时触发
  conn.on(“close”, function(code, reason){
 console.log(“Connection closed”);
  })
}).listen(8888);

 2.客户端使用websocket
 在客户端首先需要实例化一个websocket对象:ws = new WebSocket("ws://localhost:5000");其中的参数传入格式为ws://+url,这就和http协议前缀http://一样。接下来就可以通过websocket内置的一些方法进行事件监听和数据展示。
 这里统一介绍各个监听事件:onopen当服务器和客户端建立起连接时触发;onmessage当客户端收到服务器发送的数据时触发; onclose当客户端和服务器的连接关闭时触发;onerror当连接出现错误时触发。

3.使用websocket+nodejs实现在线聊天室
 (1)html和css代码省略
 (2)客户端js:    

oConnect.onclick=function(){
    ws=new WebSocket('ws://localhost:5000');
     ws.onopen=function(){
       oUl.innerHTML+="<li>客户端已连接</li>";
     }
    ws.onmessage=function(evt){
      oUl.innerHTML+="<li>"+evt.data+"</li>";
    }
    ws.onclose=function(){
      oUl.innerHTML+="<li>客户端已断开连接</li>";
    };
    ws.onerror=function(evt){
      oUl.innerHTML+="<li>"+evt.data+"</li>";
 
    };
  };
  oSend.onclick=function(){
    if(ws){
      ws.send(oInput.value);
    }
  }(3)服务器端js:
 /*
websocket支持两种类型的数据传输:text类型和binary类型,其中二进制数据是通过流的模式发送和读取的
*/
var app=require('http').createServer(handler); //为了简化代码,将服务器创建具体代码放到handler函数中
var ws=require('nodejs-websocket');
var fs=require('fs');
app.listen(8888);
function handler(req,res){
  //__dirname返回该文件所在的当前目录。调用readFile方法进行文件读取
  fs.readFile(__dirname+'/index.html',function(err,data){
    if(err){
      res.writeHead(500);
      return res.end('error ');
    }
    res.writeHead(200);
    res.end(data);
  });
}
//以上步骤成功在8888端口渲染出相应的html界面
//conn是对应的connection的实例
var server = ws.createServer(function(conn){
  console.log('new conneciton');
  //监听text事件,每当收到文本时触发
  conn.on("text",function(str){
    broadcast(server,str);
  });
  //当任何一端关闭连接时触发,这里就是在控制台输出connection closed
  conn.on("close",function(code,reason){
    console.log('connection closed');
  })
}).listen(5000);
//注意这里的listen监听是刚才开通的那个服务器的端口,客户端将消息发送到这里处理
 
function broadcast(server, msg) {
  //server.connections是一个数组,包含所有连接进来的客户端
  server.connections.forEach(function (conn) {
    //connection.sendText方法可以发送指定的内容到客户端,传入一个字符串
    //这里为遍历每一个客户端为其发送内容
    conn.sendText(msg);
  })
}

以上就是本文

的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
转自Jquery官方 jQuery1.1.3发布,速度提升800%,体积保持20K
Aug 19 Javascript
用最通俗易懂的代码帮助新手理解javascript闭包 推荐
Mar 01 Javascript
利用Angularjs实现幻灯片效果
Sep 07 Javascript
关于微信jssdk实现多图片上传的一点心得分享
Dec 13 Javascript
javascript添加前置0(补零)的几种方法
Jan 05 Javascript
Vue代码分割懒加载的实现方法
Nov 23 Javascript
JS双向链表实现与使用方法示例(增加一个previous属性实现)
Jan 31 Javascript
jQuery表单元素过滤选择器用法实例分析
Feb 20 jQuery
小程序实现图片预览裁剪插件
Nov 22 Javascript
微信小程序图片自适应实现解析
Jan 21 Javascript
vue随机验证码组件的封装实现
Feb 19 Javascript
JavaScript ECMA-262-3 深入解析(二):变量对象实例详解
Apr 25 Javascript
学习Javascript闭包(Closure)知识
Aug 07 #Javascript
JavaScript实现in-place思想的快速排序方法
Aug 07 #Javascript
使用jQuery调用XML实现无刷新即时聊天
Aug 07 #Javascript
JS中使用FormData上传文件、图片的方法
Aug 07 #Javascript
深入理解Angular2 模板语法
Aug 07 #Javascript
JS上传图片预览插件制作(兼容到IE6)
Aug 07 #Javascript
JavaScript兼容性总结之获取非行间样式案例
Aug 07 #Javascript
You might like
高亮度显示php源代码
2006/10/09 PHP
php往mysql中批量插入数据实例教程
2018/12/12 PHP
Laravel6.18.19如何优雅的切换发件账户
2020/06/14 PHP
jQuery 动态酷效果实现总结
2009/12/27 Javascript
javascript与CSS复习(《精通javascript》)
2010/06/29 Javascript
JavaScript的parseInt 取整使用
2011/05/09 Javascript
js Html结构转字符串形式显示代码
2011/11/15 Javascript
JS实现匀速运动的代码实例
2013/11/29 Javascript
JS判断客服QQ号在线还是离线状态的方法
2015/01/13 Javascript
ztree获取当前选中节点子节点id集合的方法
2015/02/12 Javascript
JavaScript使用push方法添加一个元素到数组末尾用法实例
2015/04/06 Javascript
jquery带动画效果幻灯片特效代码
2015/08/27 Javascript
基于JS实现移动端访问PC端页面时跳转到对应的移动端网页
2020/12/24 Javascript
jqGrid 学习笔记整理——进阶篇(一 )
2016/04/17 Javascript
JavaScript 上传文件(psd,压缩包等),图片,视频的实现方法
2017/06/19 Javascript
详谈js模块化规范
2017/07/07 Javascript
ES6 javascript的异步操作实例详解
2017/10/30 Javascript
微信小程序实现聊天对话(文本、图片)功能
2018/07/06 Javascript
Vue中computed、methods与watch的区别总结
2019/04/10 Javascript
IDEA安装vue插件图文详解
2019/09/26 Javascript
用Python中的wxPython实现最基本的浏览器功能
2015/04/14 Python
Python 中的 else详解
2016/04/23 Python
安装Python的教程-Windows
2017/07/22 Python
python numpy函数中的linspace创建等差数列详解
2017/10/13 Python
EM算法的python实现的方法步骤
2018/01/02 Python
用PyInstaller把Python代码打包成单个独立的exe可执行文件
2018/05/26 Python
Python2.7:使用Pyhook模块监听鼠标键盘事件-获取坐标实例
2020/03/14 Python
美国购买体育、音乐会和剧院门票网站:SelectATicket
2019/09/08 全球购物
财务管理专业应届毕业生求职信
2013/09/22 职场文书
运动会广播稿60字
2014/01/15 职场文书
行政人事经理职位说明书
2014/03/05 职场文书
成立公司计划书
2014/05/07 职场文书
小学校长先进事迹材料
2014/05/13 职场文书
介绍信范文大全
2015/05/07 职场文书
Python趣味挑战之教你用pygame画进度条
2021/05/31 Python
Python下载商品数据并连接数据库且保存数据
2022/03/31 Python