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 相关文章推荐
利用XMLHTTP传递参数在另一页面执行并刷新本页
Oct 26 Javascript
通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端的方法
Oct 01 Javascript
关于原生js中bind函数的简单实现
Aug 10 Javascript
JavaScript实现简单的日历效果
Sep 25 Javascript
ExtJs整合Echarts的示例代码
Feb 27 Javascript
bootstrap table支持高度百分比的实例代码
Feb 28 Javascript
JS限制输入框输入的实现代码
Jul 02 Javascript
JavaScript设计模式之享元模式实例详解
Jan 17 Javascript
原生JavaScript实现滑动拖动验证的示例代码
Dec 06 Javascript
JS Web Flex弹性盒子模型代码实例
Mar 10 Javascript
JavaScript检测浏览器是否支持CSS变量代码实例
Apr 03 Javascript
react PropTypes校验传递的值操作示例
Apr 28 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_xmlhttp 乱码问题解决方法
2009/08/07 PHP
PHP开发环境配置(MySQL数据库安装图文教程)
2010/04/28 PHP
PHP PDOStatement:bindParam插入数据错误问题分析
2013/11/13 PHP
支持中文、字母、数字的PHP验证码
2015/05/04 PHP
PHP并发多进程处理利器Gearman使用介绍
2016/05/16 PHP
PHP 记录访客的浏览信息方法
2018/01/29 PHP
PHP抽象类基本用法示例
2018/12/28 PHP
javascript 表单验证常见正则
2009/09/28 Javascript
jquery插件实现鼠标经过图片右侧显示大图的效果(类似淘宝)
2013/02/04 Javascript
js获得网页背景色和字体色的方法
2014/03/21 Javascript
javascript工厂方式定义对象
2014/12/26 Javascript
基于jQuery实现最基本的淡入淡出效果实例
2015/02/02 Javascript
javascript制作2048游戏
2015/03/30 Javascript
ES6的新特性概览
2016/03/10 Javascript
利用HTML5+Socket.io实现摇一摇控制PC端歌曲切换
2017/01/13 Javascript
vue webuploader 文件上传组件开发
2017/09/23 Javascript
Vue实现内部组件轮播切换效果的示例代码
2018/04/07 Javascript
微信小程序实现下拉菜单切换效果
2020/03/30 Javascript
微信小程序 setData 对 data数据影响问题
2019/04/18 Javascript
python自动化测试实例解析
2014/09/28 Python
python实现通过pil模块对图片格式进行转换的方法
2015/03/24 Python
python魔法方法-自定义序列详解
2016/07/21 Python
Python实现SSH远程登陆,并执行命令的方法(分享)
2017/05/08 Python
Django model反向关联名称的方法
2018/12/15 Python
Python实现简单查找最长子串功能示例
2019/02/26 Python
详解canvas绘制多张图的排列顺序问题
2019/01/21 HTML / CSS
有趣的睡衣和礼物:LazyOne
2019/11/27 全球购物
牛津在线药房:Oxford Online Pharmacy
2020/11/16 全球购物
启动一个线程是用run()还是start()
2016/12/25 面试题
师范生自我鉴定范文
2013/10/05 职场文书
清明节扫墓活动方案
2014/03/02 职场文书
单位绩效考核方案
2014/05/11 职场文书
节约用水标语
2014/06/11 职场文书
车辆年检委托书范本
2014/10/14 职场文书
导游词之无锡东林书院
2019/12/11 职场文书
一篇带你入门Java垃圾回收器
2021/06/16 Java/Android