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电信网通双线自动选择技巧
Nov 18 Javascript
用Javascript同时提交多个Web表单的方法
Dec 26 Javascript
原创javascript小游戏实现代码
Aug 19 Javascript
jQuery中(function(){})()执行顺序的理解
Mar 05 Javascript
javascript背景时钟实现方法
Jun 18 Javascript
jQuery实现购物车表单自动结算效果实例
Aug 10 Javascript
浅析JavaScript声明变量
Dec 21 Javascript
Js 获取、判断浏览器版本信息的简单方法
Aug 08 Javascript
浅析javaScript中的浅拷贝和深拷贝
Feb 15 Javascript
vue移动UI框架滑动加载数据的方法
Mar 12 Javascript
JS实现页面侧边栏效果探究
Jan 08 Javascript
javascript拖曳互换div的位置实现示例
Jun 28 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制作简单的内容采集器的代码
2007/11/28 PHP
MySQL数据源表结构图示
2008/06/05 PHP
php上传中文文件名乱码问题处理方案
2015/02/03 PHP
Laravel框架执行原生SQL语句及使用paginate分页的方法
2018/08/17 PHP
javascript 防止刷新,后退,关闭
2010/08/07 Javascript
基于jquery完美拖拽,可返回拖动轨迹
2012/03/29 Javascript
JavaScript DOM 编程艺术(第2版)读书笔记(JavaScript的最佳实践)
2013/10/01 Javascript
动态加载jquery库的方法
2014/02/12 Javascript
基于MVC+EasyUI的web开发框架之使用云打印控件C-Lodop打印页面或套打报关运单信息
2016/08/29 Javascript
简单实现js浮动框
2016/12/13 Javascript
详解Angular的内置过滤器和自定义过滤器【推荐】
2016/12/26 Javascript
Restify中接入Socket.io报Error:Can’t set headers的错误解决
2017/03/28 Javascript
BootStrap 导航条实例代码
2017/05/18 Javascript
ReactNative踩坑之配置调试端口的解决方法
2017/07/28 Javascript
微信小程序使用image组件显示图片的方法【附源码下载】
2017/12/08 Javascript
详解使用create-react-app添加css modules、sasss和antd
2018/07/31 Javascript
微信小程序scroll-view实现滚动穿透和阻止滚动的方法
2018/08/20 Javascript
webpack之引入图片的实现及问题
2018/10/08 Javascript
利用Vue实现一个markdown编辑器实例代码
2019/05/19 Javascript
JavaScript中var的重要性实例分析
2019/07/09 Javascript
Python中dictionary items()系列函数的用法实例
2014/08/21 Python
Python使用scrapy采集数据过程中放回下载过大页面的方法
2015/04/08 Python
Python实现树的先序、中序、后序排序算法示例
2017/06/23 Python
spyder常用快捷键(分享)
2017/07/19 Python
python多任务之协程的使用详解
2019/08/26 Python
Python项目跨域问题解决方案
2020/06/22 Python
django和flask哪个值得研究学习
2020/07/31 Python
HTML5 input元素类型:email及url介绍
2013/08/13 HTML / CSS
加拿大花店:1800Flowers.ca
2016/11/16 全球购物
美国电子元器件分销商:Newark element14
2018/01/13 全球购物
Tretorn美国官网:瑞典外套和鞋类品牌,抵御风雨
2018/07/19 全球购物
北美最大的零售退货翻新商:VIP Outlet
2019/11/21 全球购物
社团招新策划书
2014/02/04 职场文书
党风廉政教育心得体会2016
2016/01/22 职场文书
职场新人知识:如何制定一份合理的工作计划?
2019/09/11 职场文书
MySQL分库分表与分区的入门指南
2021/04/22 MySQL