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 相关文章推荐
个人总结的一些关于String、Function、Array的属性和用法
Jan 10 Javascript
javascript 面向对象编程基础 多态
Aug 21 Javascript
JavaScript 对Cookie 操作的封装小结
Dec 31 Javascript
jquery利用event.which方法获取键盘输入值的代码
Oct 09 Javascript
toggle一个div显示或隐藏且可扩展成自定义下拉框
Sep 12 Javascript
jQuery操作CheckBox的方法介绍(选中,取消,取值)
Feb 04 Javascript
用box固定长宽实现图片自动轮播js代码
Jun 09 Javascript
javascript继承的六大模式小结
Apr 13 Javascript
JS验证字符串功能
Feb 22 Javascript
使用react-router4.0实现重定向和404功能的方法
Aug 28 Javascript
vue按需加载组件webpack require.ensure的方法
Dec 13 Javascript
echarts同一页面中四个图表切换的js数据交互方法示例
Jul 03 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调用数据库的存贮过程!
2006/10/09 PHP
编写PHP脚本过滤用户上传的图片
2015/07/03 PHP
PHP实现批量重命名某个文件夹下所有文件的方法
2017/09/04 PHP
javascript 写类方式之三
2009/07/05 Javascript
Javascript+XMLHttpRequest+asp.net无刷新读取数据库数据
2009/08/09 Javascript
Javascript 面向对象 重载
2010/05/13 Javascript
firefox下jQuery UI Autocomplete 1.8.*中文输入修正方法
2012/09/19 Javascript
js精度溢出解决方案
2012/12/02 Javascript
jquery动态添加option示例
2013/12/30 Javascript
jQuery中slideUp 和 slideDown 的点击事件
2015/02/26 Javascript
jQuery+AJAX实现无刷新下拉加载更多
2015/07/03 Javascript
Vue-router 切换组件页面时进入进出动画方法
2018/09/01 Javascript
vue实现新闻展示页的步骤详解
2019/04/11 Javascript
深入浅出 Vue 系列 -- 数据劫持实现原理
2019/04/23 Javascript
vue如何搭建多页面多系统应用
2020/06/17 Javascript
jQuery实现鼠标拖拽登录框移动效果
2020/09/13 jQuery
vue实现表格合并功能
2020/12/01 Vue.js
[03:57]DOTA2英雄梦之声_第03期_幻影刺客
2014/06/21 DOTA
[02:03]《现实生活中的DOTA2》—林书豪&DOTA2职业选手出演短片
2015/08/18 DOTA
python实现复制整个目录的方法
2015/05/12 Python
Python中类的初始化特殊方法
2017/12/01 Python
利用python读取YUV文件 转RGB 8bit/10bit通用
2019/12/09 Python
tensorflow实现对张量数据的切片操作方式
2020/01/19 Python
解决pytorch 保存模型遇到的问题
2021/03/03 Python
前端canvas动画如何转成mp4视频的方法
2019/06/17 HTML / CSS
Gap工厂店:Gap Factory
2017/11/02 全球购物
合伙经营协议书
2014/04/18 职场文书
节约用水演讲稿
2014/05/21 职场文书
保密工作整改情况汇报
2014/11/06 职场文书
2014年学校体育工作总结
2014/12/08 职场文书
2014年度考核工作总结
2014/12/24 职场文书
英文道歉信
2015/01/20 职场文书
用Python创建简易网站图文教程
2021/06/11 Python
分布式架构Redis中有哪些数据结构及底层实现原理
2022/03/13 Redis
Mongodb 迁移数据块的流程介绍分析
2022/04/18 MongoDB
win10双系统怎么删除一个系统?win10电脑有两个系统删除一个的操作方法
2022/07/15 数码科技