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防止表单重复提交实现代码
Sep 05 Javascript
网站内容禁止复制和粘贴、另存为的js代码
Feb 26 Javascript
jquery.validate.js插件使用经验记录
Jul 02 Javascript
PHP中CURL的几个经典应用实例
Jan 23 Javascript
JavaScript前补零操作实例
Mar 11 Javascript
js密码强度校验
Nov 10 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之主动触发事件和模拟冒泡处理
Nov 24 Javascript
js实现华丽的九九乘法表效果
Mar 29 Javascript
vue中如何让子组件修改父组件数据
Jun 14 Javascript
详解Node.js读写中文内容文件操作
Oct 10 Javascript
详解在HTTPS 项目中使用百度地图 API
Apr 26 Javascript
vuejs中父子组件之间通信方法实例详解
Jan 17 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写出自己的BLOG系统
2010/04/12 PHP
php中serialize序列化与json性能测试的示例分析
2013/04/27 PHP
php中使用url传递数组的方法
2015/02/11 PHP
PHP Imagick完美实现图片裁切、生成缩略图、添加水印
2016/02/22 PHP
PHP设计模式之状态模式定义与用法详解
2018/04/02 PHP
document 和 document.all 分别什么时候用
2006/06/22 Javascript
javascript 无提示关闭窗口脚本
2009/08/17 Javascript
js自定义事件及事件交互原理概述(二)
2013/02/01 Javascript
jquery使用ColorBox弹出图片组浏览层实例演示
2013/03/14 Javascript
深入document.write()与HTML4.01的非成对标签的详解
2013/05/08 Javascript
javascript自然分类法算法实现代码
2013/10/11 Javascript
jQuery实现的导航条切换可显示隐藏
2014/10/22 Javascript
AngularJs根据访问的页面动态加载Controller的解决方案
2015/02/04 Javascript
JavaScript中的parse()方法使用简介
2015/06/12 Javascript
js实现Form栏显示全格式时间时钟效果代码
2015/08/19 Javascript
jQuery实现三级菜单的代码
2016/05/09 Javascript
js动态获取子复选项并设计全选及提交的实现方法
2016/06/24 Javascript
深入理解Angularjs向指令传递数据双向绑定机制
2016/12/31 Javascript
超全面的vue.js使用总结
2017/02/12 Javascript
Python CSV模块使用实例
2015/04/09 Python
简单介绍Python中的JSON使用
2015/04/28 Python
Python 中urls.py:URL dispatcher(路由配置文件)详解
2017/03/24 Python
pycharm下查看python的变量类型和变量内容的方法
2018/06/26 Python
通过Python模块filecmp 对文件比较的实现方法
2018/06/29 Python
Python 判断文件或目录是否存在的实例代码
2018/07/19 Python
俄罗斯达美乐比萨外送服务:Domino’s Pizza
2020/12/18 全球购物
简述你对Statement,PreparedStatement,CallableStatement的理解
2013/03/25 面试题
计算机软件个人的自荐信范文
2013/12/01 职场文书
资产经营总监岗位职责范文
2013/12/01 职场文书
创业计划书中要认真思考的问题
2013/12/28 职场文书
优秀少先队辅导员先进事迹材料
2014/05/18 职场文书
趣味运动会策划方案
2014/06/02 职场文书
理发店策划方案
2014/06/05 职场文书
乡镇党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
2016年度继续教育学习心得体会
2016/01/19 职场文书
党员干部学习心得体会
2016/01/23 职场文书