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 DataTable删除行后的页面更新利用Ajax解决
May 17 Javascript
javascript实现table选中的行以指定颜色高亮显示的方法
May 13 Javascript
jQuery实现带渐显效果的人物多级关系图代码
Oct 16 Javascript
Bootstrap安装环境配置教程分享
May 27 Javascript
Angularjs的Controller间通信机制实例分析
Nov 07 Javascript
React-router 4 按需加载的实现方式及原理详解
May 25 Javascript
SpringMVC+bootstrap table实例详解
Jun 02 Javascript
本地存储localStorage用法详解
Jul 31 Javascript
微信小程序仿美团城市选择
Jun 06 Javascript
JavaScript中变量提升与函数提升经典实例分析
Jul 26 Javascript
详解angular部署到iis出现404解决方案
Aug 14 Javascript
简单了解JavaScript异步
May 23 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 empty() 检查一个变量是否为空
2011/11/10 PHP
PHP面向对象程序设计模拟一般面向对象语言中的方法重载(overload)示例
2019/06/13 PHP
解决extjs在firefox中关闭窗口再打开后iframe中js函数访问不到的问题
2008/11/06 Javascript
理解Javascript_02_理解undefined和null
2010/10/11 Javascript
巧用js提交表单轻松解决一个页面有多个提交按钮
2013/11/17 Javascript
jquery导航制件jquery鼠标经过变色效果示例
2013/12/05 Javascript
让table变成exls的示例代码
2014/03/24 Javascript
JavaScript实现级联菜单的方法
2015/06/29 Javascript
JQ技术实现注册页面带有校验密码强度
2015/07/27 Javascript
jQuery链式操作实例分析
2015/11/16 Javascript
基于jQuey实现鼠标滑过变色(整行变色)
2015/12/07 Javascript
基于RequireJS和JQuery的模块化编程日常问题解析
2016/04/14 Javascript
AngularJS控制器详解及示例代码
2016/08/16 Javascript
mui上拉加载功能实例详解
2017/04/13 Javascript
js编写简单的聊天室功能
2017/08/17 Javascript
vue将单页面改造成多页面应用的方法
2018/11/25 Javascript
javascript严格模式详解(含严格模式与非严格模式的区别)
2019/11/12 Javascript
ant design vue中表格指定格式渲染方式
2020/10/28 Javascript
[38:21]2018DOTA2亚洲邀请赛3月30日 小组赛A组 LGD VS Newbee
2018/03/31 DOTA
[01:05:59]Mineski vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.22
2019/09/05 DOTA
Python导入oracle数据的方法
2015/07/10 Python
python 实现红包随机生成算法的简单实例
2017/01/04 Python
python实现闹钟定时播放音乐功能
2018/01/25 Python
pandas将DataFrame的列变成行索引的方法
2018/04/10 Python
python反编译学习之字节码详解
2019/05/19 Python
python rsa-oaep加密的示例代码
2020/09/23 Python
联想韩国官网:Lenovo Korea
2018/05/10 全球购物
意大利灯具购物网站:Lampade.it
2018/10/18 全球购物
通用自荐信范文
2014/03/14 职场文书
经济贸易专业自荐信
2014/06/11 职场文书
公司车辆维修管理制度
2015/08/05 职场文书
搞笑欢迎词大全
2015/09/30 职场文书
2016年入党心得体会范文
2016/01/23 职场文书
2019广播稿怎么写
2019/04/17 职场文书
Python实现Telnet自动连接检测密码的示例
2021/04/16 Python
开发微信小程序之WXSS样式教程
2022/04/18 HTML / CSS