基于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 相关文章推荐
JS 巧妙获取剪贴板数据 Excel数据的粘贴
Jul 09 Javascript
JQuery中SetTimeOut传参问题探讨
May 10 Javascript
Jquery获取和修改img的src值的方法
Feb 17 Javascript
JavaScript与HTML的结合方法详解
Nov 23 Javascript
javascript 继承学习心得总结
Mar 17 Javascript
js中class的点击事件没有效果的解决方法
Oct 13 Javascript
原生js实现可爱糖果数字时间特效
Dec 30 Javascript
jQuery使用DataTable实现删除数据后重新加载功能
Feb 27 Javascript
利用vue开发一个所谓的数独方法实例
Dec 21 Javascript
Angular使用动态加载组件方法实现Dialog的示例
May 11 Javascript
在vue中使用Base64转码的案例
Aug 07 Javascript
如何在vue 中使用柱状图 并自修改配置
Jan 21 Vue.js
基于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缓存类代码(附详细说明)
2011/06/09 PHP
php array_merge函数使用需要注意的一个问题
2015/03/30 PHP
一个非常实用的php文件上传类
2017/07/04 PHP
thinkphp 框架数据库切换实现方法分析
2020/05/18 PHP
CSS3画一个阴阳八卦图
2021/03/09 HTML / CSS
JS实现悬浮移动窗口(悬浮广告)的特效
2013/03/12 Javascript
js/jquery获取文本框输入焦点的方法
2014/03/04 Javascript
最简单的JavaScript图片轮播代码(两种方法)
2015/12/18 Javascript
jquery实现具有收缩功能的垂直导航菜单
2016/02/16 Javascript
BootStrap的Datepicker控件使用心得分享
2016/05/25 Javascript
Javascript必知必会(四)js类型转换
2016/06/08 Javascript
bootstrapfileinput实现文件自动上传
2016/11/08 Javascript
Javascript 高性能之递归,迭代,查表法详解及实例
2017/01/08 Javascript
vue实现简单表格组件实例详解
2017/04/16 Javascript
JavaScript手风琴页面制作
2017/05/17 Javascript
集成vue到jquery/bootstrap项目的方法
2018/02/10 jQuery
vue中多路由表头吸顶实现的几种布局方式
2019/04/12 Javascript
JavaScript实现抖音罗盘时钟
2019/10/11 Javascript
Django框架中的对象列表视图使用示例
2015/07/21 Python
python实现实时监控文件的方法
2016/08/26 Python
Python基于PyGraphics包实现图片截取功能的方法
2017/12/21 Python
python 3利用Dlib 19.7实现摄像头人脸检测特征点标定
2018/02/26 Python
python绘制直线的方法
2018/06/30 Python
python中hasattr()、getattr()、setattr()函数的使用
2019/08/16 Python
Python 线程池用法简单示例
2019/10/02 Python
python集成开发环境配置(pycharm)
2020/02/14 Python
pyinstaller打包成无控制台程序时运行出错(与popen冲突的解决方法)
2020/04/15 Python
详解python logging日志传输
2020/07/01 Python
英国排名第一的最新设计师品牌手表独立零售商:TIC Watches
2016/09/24 全球购物
大码女装:Ulla Popken
2019/08/06 全球购物
do you have any Best Practice for testing
2016/06/04 面试题
工业学校毕业生自荐书
2014/01/03 职场文书
银行优秀员工事迹
2014/02/06 职场文书
教师节演讲稿
2014/05/06 职场文书
成品仓管员岗位职责
2015/04/01 职场文书
负责培养人意见
2015/06/05 职场文书