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 相关文章推荐
在线编辑器的实现原理(兼容IE和FireFox)
Mar 09 Javascript
jqGrid日期格式的判断示例代码(开始日期与结束日期)
Nov 08 Javascript
8个实用的jQuery技巧
Mar 04 Javascript
JavaScript的RequireJS库入门指南
Jul 01 Javascript
JavaScript的new date等日期函数在safari中遇到的坑
Oct 24 Javascript
jQuery插件扩展实例【添加回调函数】
Nov 26 Javascript
js实现右键自定义菜单
Dec 03 Javascript
微信小程序 122100版本更新问题解决方案
Dec 22 Javascript
Node.js连接mongodb实例代码
Jun 06 Javascript
Django中使用jquery的ajax进行数据交互的实例代码
Oct 15 jQuery
3种vue组件的书写形式
Nov 29 Javascript
vue.js中$set与数组更新方法
Mar 08 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 图片加水印与上传图片加水印php类
2010/05/12 PHP
关于laravel框架中的常用目录路径函数
2019/10/23 PHP
为数据添加append,remove功能
2006/10/03 Javascript
JavaScript传递变量: 值传递?引用传递?
2011/02/22 Javascript
jquery 构造函数在表单提交过程中修改数据
2015/05/25 Javascript
使用JQuery FancyBox插件实现图片展示特效
2015/11/16 Javascript
详解Bootstrap glyphicons字体图标
2016/01/04 Javascript
jQuery插件 Jqplot图表实例
2016/06/18 Javascript
快速解决js开发下拉框中blur与click冲突
2016/10/10 Javascript
Node.js使用Express创建Web项目详细教程
2017/03/31 Javascript
详解用vue-cli来搭建vue项目和webpack
2017/04/20 Javascript
javascript  删除select中的所有option的实例
2017/09/17 Javascript
详解node.js 下载图片的 2 种方式
2018/03/02 Javascript
angularjs使用div模拟textarea文本框的方法
2018/10/02 Javascript
node app 打包工具pkg的具体使用
2019/01/17 Javascript
javascript 设计模式之享元模式原理与应用详解
2020/04/08 Javascript
[05:40]DOTA2荣耀之路6:Wings最后进攻
2018/05/30 DOTA
Python中使用items()方法返回字典元素对的教程
2015/05/21 Python
Windows下实现Python2和Python3两个版共存的方法
2015/06/12 Python
python获取mp3文件信息的方法
2015/06/15 Python
详解Python map函数及Python map()函数的用法
2017/11/16 Python
使用pytorch完成kaggle猫狗图像识别方式
2020/01/10 Python
部署Django到阿里云服务器教程示例
2020/06/03 Python
python中tab键是什么意思
2020/06/18 Python
pyx文件 生成pyd 文件用于 cython调用的实现
2021/03/04 Python
CSS3 选择器 基本选择器介绍
2012/01/21 HTML / CSS
解析HTML5的存储功能和web SQL的相关操作方法
2016/02/19 HTML / CSS
美国市场上最实惠的送餐服务:Dinnerly
2018/03/18 全球购物
劳资员岗位职责
2013/11/11 职场文书
关于礼仪的演讲稿
2014/01/04 职场文书
项目合作计划书
2014/01/09 职场文书
上班玩手机检讨书
2014/02/17 职场文书
搞笑的爱情检讨书
2014/10/01 职场文书
2014年公路养护工作总结
2014/12/04 职场文书
会计工作检讨书
2015/02/19 职场文书
2016年清明节网上祭英烈活动总结
2016/04/01 职场文书