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 相关文章推荐
jQuery开发者都需要知道的5个小技巧
Jan 08 Javascript
jQuery 1.5最新版本的改进细节分析
Jan 19 Javascript
Firefox/Chrome/Safari的中可直接使用$/$$函数进行调试
Feb 13 Javascript
jquery分页插件AmSetPager(自写)
Apr 15 Javascript
使用jQuery实现的掷色子游戏动画效果
Mar 14 Javascript
jquery制作属于自己的select自定义样式
Nov 23 Javascript
Web前端开发工具——bower依赖包管理工具
Mar 29 Javascript
Vue.js计算属性computed与watch(5)
Dec 09 Javascript
Bootstrap 手风琴菜单的实现代码
Jan 20 Javascript
Ionic+AngularJS实现登录和注册带验证功能
Feb 09 Javascript
基于vue.js中关于下拉框的值默认及绑定问题
Aug 22 Javascript
react native 仿微信聊天室实例代码
Sep 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
学习thinkphp5.0验证类使用方法
2017/11/16 PHP
php使用redis的有序集合zset实现延迟队列应用示例
2020/02/20 PHP
jquery 日期分离成年月日的代码
2010/05/14 Javascript
扩展jquery实现客户端表格的分页、排序功能代码
2011/03/16 Javascript
Javascript 按位与赋值运算符 (&amp;=)使用介绍
2014/02/04 Javascript
js实现进度条的方法
2015/02/13 Javascript
easyui Droppable组件实现放置特效
2015/08/19 Javascript
JS实现title标题栏文字不间断滚动显示效果
2016/09/07 Javascript
Vue.js双向绑定操作技巧(初级入门)
2016/12/27 Javascript
详解vue2路由vue-router配置(懒加载)
2017/04/08 Javascript
原生JS实现图片无缝滚动方法(附带封装的运动框架)
2017/10/01 Javascript
抖音上用记事本编写爱心小程序教程
2019/04/17 Javascript
vue自定义js图片碎片轮播图切换效果的实现代码
2019/04/28 Javascript
vue-router跳转时打开新页面的两种方法
2019/07/29 Javascript
详解vue+axios给开发环境和生产环境配置不同的接口地址
2019/08/16 Javascript
微信小程序自定义头部导航栏(组件化)
2019/11/15 Javascript
[01:04:02]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第二场 1月24日
2021/03/11 DOTA
Pandas标记删除重复记录的方法
2018/04/08 Python
python3.6使用urllib完成下载的实例
2018/12/19 Python
Python企业编码生成系统之系统主要函数设计详解
2019/07/26 Python
Python中list循环遍历删除数据的正确方法
2019/09/02 Python
Django通过json格式收集主机信息
2020/05/29 Python
python能在浏览器能运行吗
2020/06/17 Python
Python with语句用法原理详解
2020/07/03 Python
Keras loss函数剖析
2020/07/06 Python
销售所有的狗狗产品:Dog.com
2016/10/13 全球购物
SKECHERS官方旗舰店:美国舒适运动休闲品牌
2017/12/22 全球购物
Tessabit日本:集世界奢侈品和设计师品牌的意大利精品买手店
2020/01/07 全球购物
文明教师事迹材料
2014/01/16 职场文书
应届生自荐信范文
2014/02/21 职场文书
如何写自我鉴定
2014/03/19 职场文书
如何写一份好的英文求职信
2014/03/19 职场文书
公司合作协议范文
2014/10/01 职场文书
党的群众路线整改落实情况汇报
2014/10/28 职场文书
NodeJs内存占用过高的排查实战记录
2021/05/10 NodeJs
Linux中一对多配置日志服务器的详细步骤
2022/07/23 Servers