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 相关文章推荐
ArrayList类(增强版)
Apr 04 Javascript
一个符号插入器 中用到的js代码
Sep 04 Javascript
js禁止页面使用右键(简单示例代码)
Nov 13 Javascript
Javascript对象属性方法汇总
Nov 21 Javascript
在javascript中执行任意html代码的方法示例解读
Dec 25 Javascript
JavaScript也谈内存优化
Jun 06 Javascript
JavaScript实现鼠标点击导航栏变色特效
Feb 08 Javascript
详解如何用模块化的方式写vuejs
Dec 16 Javascript
karma+webpack搭建vue单元测试环境的方法示例
May 24 Javascript
基于D3.js实现时钟效果
Jul 17 Javascript
ES6 系列之 WeakMap的使用示例
Aug 06 Javascript
vue-cli3搭建项目的详细步骤
Dec 05 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
Yii实现MySQL多数据库和读写分离实例分析
2014/12/03 PHP
PHP可变变量学习小结
2015/11/29 PHP
Laravel中正确地返回HTTP状态码方法示例
2019/09/10 PHP
php实现简单四则运算器
2020/11/29 PHP
JS鼠标事件大全 推荐收藏
2011/11/01 Javascript
在js(jquery)中获得文本框焦点和失去焦点的方法
2012/12/04 Javascript
利用js正则表达式验证手机号,email地址,邮政编码
2014/01/23 Javascript
jQuery过滤选择器:not()方法使用介绍
2014/04/20 Javascript
js 获取时间间隔实现代码
2014/05/12 Javascript
给js文件传参数(详解)
2014/07/13 Javascript
Ajax中解析Json的两种方法对比分析
2015/06/25 Javascript
详解js图片轮播效果实现原理
2015/12/17 Javascript
详解javascript获取url信息的常见方法
2016/12/19 Javascript
AngularJS中$injector、$rootScope和$scope的概念和关联关系深入分析
2017/01/19 Javascript
Vue实现自带的过滤器实例
2017/03/09 Javascript
全面解析Node.js 8 重要功能和修复
2017/06/02 Javascript
浅谈Angular路由复用策略
2017/10/04 Javascript
原生JS实现的双色球功能示例
2018/02/02 Javascript
垃圾回收器的相关知识点总结
2018/05/13 Javascript
vue数组对象排序的实现代码
2018/06/20 Javascript
小程序关于请求同步的总结
2019/05/05 Javascript
Python图像灰度变换及图像数组操作
2016/01/27 Python
Python编程实现删除VC临时文件及Debug目录的方法
2017/03/22 Python
详解【python】str与json类型转换
2019/04/29 Python
Sneaker Studio匈牙利:购买运动鞋
2018/03/26 全球购物
电子商务专业学生的学习自我评价
2013/10/27 职场文书
互联网创业计划书的书写步骤
2014/01/28 职场文书
化妆品店促销方案
2014/02/24 职场文书
公司合作协议书范本
2014/04/18 职场文书
吨的认识教学反思
2014/04/27 职场文书
师范大学生求职信
2014/06/13 职场文书
在宿舍喝酒的检讨书
2014/09/28 职场文书
2015年挂职锻炼工作总结
2014/12/12 职场文书
写给老师的感谢信
2015/01/20 职场文书
2019年教师节活动策划方案
2019/09/09 职场文书
Python趣味挑战之实现简易版音乐播放器
2021/05/28 Python