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 相关文章推荐
客户端限制只能上传jpg格式图片的js代码
Dec 09 Javascript
jQuery创建插件的代码分析
Apr 14 Javascript
jQuery实现转动随机数抽奖效果的方法
May 21 Javascript
Bootstrap每天必学之基础排版
Nov 20 Javascript
JavaScript中rem布局在react中的应用
Dec 09 Javascript
jQuery 3.0十大新特性
Jul 06 Javascript
javascript工厂模式和构造函数模式创建对象方法解析
Dec 30 Javascript
Bootstrap组件之下拉菜单,多级菜单及按钮布局方法实例
May 25 Javascript
浅谈angular4 ng-content 中隐藏的内容
Aug 18 Javascript
vue interceptor 使用教程实例详解
Sep 13 Javascript
vue 使用外部JS与调用原生API操作示例
Dec 02 Javascript
Vue实现多页签组件
Jan 14 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
PHP 数据库树的遍历方法
2009/02/06 PHP
windows下开发并编译PHP扩展的方法
2011/03/18 PHP
PHP中strtotime函数使用方法详解
2011/11/27 PHP
Trying to clone an uncloneable object of class Imagic的解决方法
2012/01/11 PHP
浅析php中抽象类和接口的概念以及区别
2013/06/27 PHP
PHP中HTML标签过滤技巧
2014/01/07 PHP
ThinkPHP无限级分类原理实现留言与回复功能实例
2014/10/31 PHP
twig里使用js变量的方法
2016/02/05 PHP
jQuery 页面载入进度条实现代码
2009/02/08 Javascript
jquery常用操作小结
2014/07/21 Javascript
做web开发 先学JavaScript
2014/12/12 Javascript
js实现简单鼠标跟随效果的方法
2015/04/10 Javascript
JavaScript中用getDate()方法返回指定日期的教程
2015/06/09 Javascript
JS模拟实现Select效果代码
2015/09/24 Javascript
vue.js父组件使用外部对象的方法示例
2017/04/25 Javascript
AngularJS 实现购物车全选反选功能
2017/10/24 Javascript
移动web开发之touch事件实例详解
2018/01/17 Javascript
ES6数组与对象的解构赋值详解
2019/06/14 Javascript
layer更改皮肤的实现方法
2019/09/11 Javascript
vue在App.vue文件中监听路由变化刷新页面操作
2020/08/14 Javascript
vue任意关系组件通信与跨组件监听状态vue-communication
2020/10/18 Javascript
javascript局部自定义鼠标右键菜单
2020/12/08 Javascript
[03:58]2014DOTA2国际邀请赛 龙宝赛后解密DK获胜之道
2014/07/14 DOTA
[52:06]FNATIC vs NIP 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
Python程序设计入门(5)类的使用简介
2014/06/16 Python
Python的requests网络编程包使用教程
2016/07/11 Python
Python中生成器和迭代器的区别详解
2018/02/10 Python
Python标准库shutil用法实例详解
2018/08/13 Python
Django中的用户身份验证示例详解
2019/08/07 Python
python实现小世界网络生成
2019/11/21 Python
Python打开文件、文件读写操作、with方式、文件常用函数实例分析
2020/01/07 Python
利用keras使用神经网络预测销量操作
2020/07/07 Python
英国最受信任的在线眼镜商之一:Fashion Eyewear
2019/10/31 全球购物
教师节促销方案
2014/03/22 职场文书
大学优秀班集体申报材料
2014/05/23 职场文书
高一地理教学工作总结
2015/08/12 职场文书