基于socket.io和node.js搭建即时通信系统


Posted in Javascript onJuly 30, 2014

使用socket.io和nodejs搭建websocket服务器端

socket.io不仅可以搭建客户端的websocket服务,而且支持nodejs服务器端的websocket。

下面让我来介绍一下怎么安装配置nodejs.

进入http://nodejs.org/#download下载msi文件。一直点next安装。最后文件会自动安装在C:\nodejs目录下。

安装完成后,会自动配置环境环境变量。如果没有自动配置,自己手动在path处加上 ;C:\nodejs\。

安装完成后,需要配置npm来管理node.js的模块。

在window下安装npm需要安装git。

安装完git后,打开gitbush。执行下面几步:

git config --system http.sslcainfo /bin/curl-ca-bundle.crt

git clone --recursive git://github.com/isaacs/npm.git

cd npm

node cli.js install npm -gf

第一个是设置不会有任何提示,第二步会到github上下载npm会有下载文件和进度,第四步是安装npm到node.js会复制几个文件cmd文件和mode_modules文件夹到nodejs目录。

这样就配置好了npm。

如果需要安装什么模块直接输入npm install ***。

没有npm的或者windows用户可以使用github下载socket.io并且放入到node_modules文件夹中,具体配置可以参考文章:《nodejs教程:配置nodejs.exe的windows目录结构》

nodejs安装socket.io

使用node插件管理包,运行下面的命令就可以安装成功socket.io

npm install socket.io

用socket.io 实现的一个例子

客户端代码:

<html> 

<head> 

  <title></title> 

  <script src="../js/socket.io.client.js"></script> 

  <script type="text/javascript"> 

    function doit() { 

      var socket = io.connect('http://localhost'); 

      socket.on('news', function (data) {//接收到服务器发送过来的名为'new'的数据 

        console.log(data.hello);//data为应服务器发送过来的数据。 

        socket.emit('my new event', { my:'new data' });//向服务器发送数据,实现双向数据传输 

      }); 

      socket.on('other', function (data) {//接收另一个名为'other'数据, 

        console.log(data.hello); 

        socket.emit('event1', { my:'other data' }); 

      }); 

    } 

  </script> 

</head> 

<body> 

<button id='btn' onclick="doit()">click me</button> 

</body> 

</html>

socket.io.client.js可以https://github.com/LearnBoost/socket.io-client下载到本地,在<script src="..">指向本机的js库。

服务器用nodejs实现

server2.js

var http= require('http'), io= require('socket.io'), express= require('express'); 

var app = express.createServer(), io = io.listen(app); 

app.listen(80); 

io.sockets.on('connection', function (socket) { 

 socket.emit('news', { hello: 'world' });//监听,一旦客户端连接上,即发送数据,第一个参数'new'为数据名,第二个参数既为数据 

 socket.on('my other event', function (data) {//捕获客户端发送名为'my other event'的数据 

  console.log(data.my); 

 }); 

 socket.emit('other', { hello: 'other world' });//发送另一个数据 

 socket.on('evnet1', function (data) {//捕获另外一个数据 

  console.log(data.my); 

 }); 

});

测试结果,客户端可正常显示

服务器端显示结果:

C:\java\Nodejs>node server2.js

注:代码要和npm_module在同一个目录下。不然会出现找不到socket.io module的错误。

Javascript 相关文章推荐
jquery ajax跨域解决方法(json方式)
Feb 04 Javascript
jquery带动画效果幻灯片特效代码
Aug 27 Javascript
基于jQuery实现仿搜狐辩论投票动画代码(附源码下载)
Feb 18 Javascript
AngularJS 执行流程详细介绍
Aug 18 Javascript
localStorage的黑科技-js和css缓存机制
Feb 06 Javascript
windows下vue-cli及webpack搭建安装环境
Apr 25 Javascript
AngularJS常见过滤器用法实例总结
Jul 06 Javascript
Vue前后端不同端口的实现方法
Sep 19 Javascript
require.js 加载过程与使用方法介绍
Oct 30 Javascript
微信小程序swiper使用网络图片不显示问题解决
Dec 13 Javascript
原生js实现的金山打字小游戏(实例代码详解)
Mar 16 Javascript
JavaScript canvas实现跟随鼠标移动小球
Feb 09 Javascript
基于Jquery+Ajax+Json实现分页显示附效果图
Jul 30 #Javascript
JQuery实现表格动态增加行并对新行添加事件
Jul 30 #Javascript
jQuery修改CSS伪元素属性的方法
Jul 30 #Javascript
教你在heroku云平台上部署Node.js应用
Jul 30 #Javascript
浅析Node在构建超媒体API中的作用
Jul 30 #Javascript
JS实现图片无间断滚动代码汇总
Jul 30 #Javascript
使用jquery.upload.js实现异步上传示例代码
Jul 29 #Javascript
You might like
PHP HTML JavaScript MySQL代码如何互相传值的方法分享
2012/09/30 PHP
解析:使用php mongodb扩展时 需要注意的事项
2013/06/18 PHP
分享一个超好用的php header下载函数
2014/01/31 PHP
php通过curl模拟登陆DZ论坛
2015/05/11 PHP
php mysql_real_escape_string addslashes及mysql绑定参数防SQL注入攻击
2016/12/23 PHP
使用Codeigniter重写insert的方法(推荐)
2017/03/23 PHP
PHP中soap用法示例【SoapServer服务端与SoapClient客户端编写】
2018/12/25 PHP
PHP实现基于状态的责任链审批模式详解
2019/05/31 PHP
splice slice区别
2006/10/09 Javascript
文本框的字数限制功能jquery插件
2009/11/24 Javascript
JavaScript中将一个值转换为字符串的方法分析[译]
2012/09/21 Javascript
通过jQuery源码学习javascript(一)
2012/12/27 Javascript
浅析tr的隐藏和显示问题
2014/03/05 Javascript
JavaScript实现更改网页背景与字体颜色的方法
2015/02/02 Javascript
jQuery form插件之formDdata参数校验表单及验证后提交
2016/01/23 Javascript
javascript结合Flexbox简单实现滑动拼图游戏
2016/02/18 Javascript
knockoutjs模板实现树形结构列表
2017/07/31 Javascript
详解swipe使用及竖屏页面滚动方法
2018/06/28 Javascript
微信小程序 如何获取网络状态
2019/07/26 Javascript
[40:05]LGD vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Python 文件读写操作实例详解
2014/03/12 Python
python结合API实现即时天气信息
2016/01/19 Python
使用Python从零开始撸一个区块链
2018/03/14 Python
10个Python小技巧你值得拥有
2018/09/29 Python
用Python实现读写锁的示例代码
2018/11/05 Python
Python后台管理员管理前台会员信息的讲解
2019/01/28 Python
python3跳出一个循环的实例操作
2020/08/18 Python
教育学专业毕业生的自我鉴定
2013/11/26 职场文书
毕业自我鉴定总结
2014/03/24 职场文书
2014年党员公开承诺践诺书
2014/03/25 职场文书
病人写给医生的感谢信
2015/01/23 职场文书
初中生思想道德自我评价
2015/03/09 职场文书
会议简讯范文
2015/07/20 职场文书
教师远程培训心得体会
2016/01/09 职场文书
python使用pygame创建精灵Sprite
2021/04/06 Python
Golang 获取文件md5校验的方法以及效率对比
2021/05/08 Golang