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 相关文章推荐
用JS控制回车事件的代码
Feb 20 Javascript
location对象的属性和方法应用(解析URL)
Apr 12 Javascript
js中的布尔运算符使用介绍
Nov 20 Javascript
JavaScript 判断用户输入的邮箱及手机格式是否正确
Dec 08 Javascript
js中判断用户输入的值是否为空的简单实例
Dec 23 Javascript
js动态获取子复选项并设计全选及提交的实现方法
Jun 24 Javascript
使用node.js中的Buffer类处理二进制数据的方法
Nov 26 Javascript
jQueryUI Sortable 应用Demo(分享)
Sep 07 jQuery
angular 实现下拉列表组件的示例代码
Mar 09 Javascript
js里面的变量范围分享
Jul 18 Javascript
vue prop传值类型检验方式
Jul 30 Javascript
vue3中轻松实现switch功能组件的全过程
Jan 07 Vue.js
学习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
利用discuz自带通行证整合dedecms的方法以及文件下载
2007/03/06 PHP
php调用Google translate_tts api实现代码
2013/08/07 PHP
php检测apache mod_rewrite模块是否安装的方法
2015/03/14 PHP
php实现的三个常用加密解密功能函数示例
2017/11/06 PHP
PHP APP微信提现接口代码
2018/09/30 PHP
Laravel统计一段时间间隔的数据方法
2019/10/09 PHP
php上传后台无法收到数据解决方法
2019/10/28 PHP
jquery 插件学习(六)
2012/08/06 Javascript
jquery 循环显示div的示例代码
2013/10/18 Javascript
跟我学习javascript的浮点数精度
2015/11/16 Javascript
JavaScript必知必会(三) String .的方法来自何方
2016/06/08 Javascript
jQuery实现CheckBox全选、全不选功能
2017/01/11 Javascript
jQuery实现的简单悬浮层功能完整实例
2017/01/23 Javascript
JS正则表达式完美实现身份证校验功能
2017/10/18 Javascript
Vue 2.5 Level E 发布了: 新功能特性一览
2017/10/24 Javascript
JS选取DOM元素常见操作方法实例分析
2018/12/10 Javascript
在微信小程序中使用vant的方法
2019/06/07 Javascript
Jquery Datatables的使用详解
2020/01/30 jQuery
vue 在单页面应用里使用二级套嵌路由
2020/12/19 Vue.js
[39:46]完美世界DOTA2联赛PWL S2 LBZS vs Rebirth 第二场 11.25
2020/11/25 DOTA
python求众数问题实例
2014/09/26 Python
python中学习K-Means和图片压缩
2017/11/20 Python
特征脸(Eigenface)理论基础之PCA主成分分析法
2018/03/13 Python
Python for循环生成列表的实例
2018/06/15 Python
python队列原理及实现方法示例
2019/11/27 Python
使用Python开发个京东上抢口罩的小实例(仅作技术研究学习使用)
2020/03/10 Python
python 两个一样的字符串用==结果为false问题的解决
2020/03/12 Python
python爬虫用scrapy获取影片的实例分析
2020/11/23 Python
什么情况下你必须要把一个类定义为abstract的
2013/01/06 面试题
简单的JAVA编程面试题
2013/03/19 面试题
教师评优的个人自我评价分享
2013/09/19 职场文书
奥巴马的演讲稿
2014/05/15 职场文书
无子女夫妻离婚协议书(4篇)
2014/10/20 职场文书
初中家长评语和期望
2014/12/26 职场文书
个人落户申请书怎么写?
2019/06/28 职场文书
python中super()函数的理解与基本使用
2021/08/30 Python