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 相关文章推荐
超级退弹代码
Jul 07 Javascript
javascript IE中的DOM ready应用技巧
Jul 23 Javascript
window.onload 加载完毕的问题及解决方案(下)
Jul 09 Javascript
jquery $.each 和for怎么跳出循环终止本次循环
Sep 27 Javascript
使用GruntJS构建Web程序之合并压缩篇
Jun 06 Javascript
javascript消除window.close()的提示窗口
May 20 Javascript
使用JQuery在线制作ppt并在线演示源码特效
Sep 08 Javascript
再谈JavaScript异步编程
Jan 27 Javascript
解决vue 按钮多次点击重复提交数据问题
May 10 Javascript
Vue 实现把表单form数据 转化成json格式的数据
Oct 29 Javascript
详解Vue数据驱动原理
Nov 17 Javascript
JavaScript实现H5接金币功能(实例代码)
Feb 22 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
回首过去10年中最搞笑的10部动漫,哪一部让你节操尽碎?
2020/03/03 日漫
php中文件上传的安全问题
2006/10/09 PHP
初次接触php抽象工厂模式(Elgg)
2010/03/21 PHP
PHP操作MySQL事务实例
2014/11/05 PHP
PHP yii实现model添加默认值的方法(两种方法)
2016/11/10 PHP
PHP编程文件处理类SplFileObject和SplFileInfo用法实例分析
2017/07/22 PHP
CMSPRESS 10行代码搞定 PHP无限级分类2
2018/03/30 PHP
Yii2结合Workerman的websocket示例详解
2018/09/10 PHP
php图片裁剪函数
2018/10/31 PHP
AlertBox 弹出层信息提示框效果实现步骤
2010/10/11 Javascript
jquery实现控制表格行高亮实例
2013/06/05 Javascript
Jquery 实现grid绑定模板
2015/01/28 Javascript
基于JS设计12306登录页面
2016/12/28 Javascript
微信小程序 wx:for的使用实例详解
2017/04/27 Javascript
Vue filter介绍及其使用详解
2017/10/21 Javascript
微信小程序项目实践之验证码倒计时功能
2018/07/18 Javascript
webpack4.0 入门实践教程
2018/10/08 Javascript
在Vue中使用antv的示例代码
2020/06/29 Javascript
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
2020/08/14 Javascript
详解vue-router的导航钩子(导航守卫)
2020/11/02 Javascript
python基础教程之缩进介绍
2014/08/29 Python
python文件名和文件路径操作实例
2017/09/29 Python
Python判断两个对象相等的原理
2017/12/12 Python
Django添加sitemap的方法示例
2018/08/06 Python
Python调用服务接口的实例
2019/01/03 Python
利用Python+阿里云实现DDNS动态域名解析的方法
2019/04/01 Python
Python任意字符串转16, 32, 64进制的方法
2019/06/12 Python
python的mysql数据库建立表与插入数据操作示例
2019/09/30 Python
python将数组n等分的实例
2019/12/02 Python
英国婚礼商城:Wedding Mall
2019/11/02 全球购物
机械工程师岗位职责
2014/06/16 职场文书
2014年安全员工作总结
2014/11/13 职场文书
小学新教师个人总结
2015/02/05 职场文书
幼儿园重阳节活动总结
2015/05/05 职场文书
一小时学会TensorFlow2之基本操作2实例代码
2021/09/04 Python
Win11 Dev 预览版25174.1000发布 (附更新修复内容汇总)
2022/08/05 数码科技