基于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判断IE6/IE7/FF的代码[XMLHttpRequest]
Feb 16 Javascript
Javascript计算时间差的函数分享
Jul 04 Javascript
30个让人兴奋的视差滚动(Parallax Scrolling)效果网站
Mar 04 Javascript
artdialog的图片/标题以及关闭按钮不显示的解决方法
Jun 27 Javascript
浅谈nodeName,nodeValue,nodeType,typeof 的区别
Jan 13 Javascript
RGB和YUV 多媒体编程基础详细介绍
Nov 04 Javascript
Angular使用ng-messages与PHP进行表单数据验证
Dec 28 Javascript
JS+Canvas绘制动态时钟效果
Nov 10 Javascript
Angular2中监听数据更新的方法
Aug 31 Javascript
Vue+Express实现登录注销功能的实例代码
May 05 Javascript
ionic4+angular7+cordova上传图片功能的实例代码
Jun 19 Javascript
JavaScript实现Excel表格效果
Feb 07 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 模板高级篇总结
2006/12/21 PHP
PHP使用get_headers函数判断远程文件是否存在的方法
2014/11/28 PHP
PHP实现简单登录界面
2019/10/23 PHP
UserData用法总结 lanyu出品
2010/07/01 Javascript
JQuery select控件的相关操作实现代码
2012/09/14 Javascript
javaScript矢量图表库-gRaphael几行代码实现精美的条形图/饼图/点图/曲线图
2013/01/09 Javascript
jQuery设置和移除文本框默认值的方法
2015/03/09 Javascript
jquery自适应布局的简单实例
2016/05/28 Javascript
js简单正则验证汉字英文及下划线的方法
2016/11/28 Javascript
angular ng-click防止重复提交实例
2017/06/16 Javascript
原生JS实现轮播图效果
2018/10/12 Javascript
vue element-ui之怎么封装一个自己的组件的详解
2019/05/20 Javascript
jquery实现动态创建form并提交的方法示例
2019/05/27 jQuery
微信小程序select下拉框实现源码
2019/11/08 Javascript
微信小程序实现上拉加载功能
2019/11/20 Javascript
nestjs返回给前端数据格式的封装实现
2021/02/22 Javascript
不要用强制方法杀掉python线程
2017/02/26 Python
详解python中Numpy的属性与创建矩阵
2018/09/10 Python
python2.7和NLTK安装详细教程
2018/09/19 Python
Linux下python3.6.1环境配置教程
2018/09/26 Python
解决PyCharm的Python.exe已经停止工作的问题
2018/11/29 Python
python 实现将txt文件多行合并为一行并将中间的空格去掉方法
2018/12/20 Python
详解python中自定义超时异常的几种方法
2019/07/29 Python
详解python中index()、find()方法
2019/08/29 Python
Python 异常的捕获、异常的传递与主动抛出异常操作示例
2019/09/23 Python
python opencv 实现对图像边缘扩充
2020/01/19 Python
python实现126邮箱发送邮件
2020/05/20 Python
python实现网页录音效果
2020/10/26 Python
CSS3打造百度贴吧的3D翻牌效果示例
2017/01/04 HTML / CSS
HTML5中视频音频的使用详解
2017/07/07 HTML / CSS
域名注册、建站工具、网页主机、SSL证书:Dynadot
2017/01/06 全球购物
公司总经理岗位职责
2014/03/15 职场文书
校长寄语大全
2014/04/09 职场文书
2015年酒店年度工作总结
2015/05/23 职场文书
js实现上传图片到服务器
2021/04/11 Javascript
在SQL Server中使用 Try Catch 处理异常的示例详解
2022/07/15 SQL Server