websocket入门(1)——初识socket.io
2017-06-28 11:04
405 查看
socket.io简述
1、基本介绍
socket.io是基于websocket技术,实现实时通信功能的技术。简单来说,通过websocket技术,客户端可以和服务器端进行双向实时通信,从而可以实现很多高级特性。
这里附一个阮一峰的关于WebSocket 教程,以供深入理解。
而socket.io是以websocket技术为主,为了兼容性还带多个降级支持办法,包括:
Flash Socket AJAX long-polling AJAX multipart Stream Forever IFrame JSONP polling
他会根据浏览器的支持程度,自动选择通过哪种技术来实现通信。
另附一个socket.io的详细工作流程的知乎回答,个人觉得讲得很好。
2、环境
socket.io封装了前端和后端的全部内容,他是一个跨平台的库。包括前端的socket.io的js库,以及后端基于Node.js的模块。
简单来说:
前端引入socket.io的js文件即可;
后端通过npm安装socket.io,然后引入并使用即可;
3、前端
socket.io官网下载即可,或者直接引入通过CDN加速过的文件。最简单的前端示例DEMO可以看我的示例demo
https://github.com/qq20004604/Backgammon-websocket/blob/master/public/base.html
需要结合后端使用(请看4)
4、后端
我姑且认为你有Node.js和npm。通过npm安装socket.io
npm install --save socket.io
然后通过require引入socket.io的初始化函数,并使用这个函数初始化http服务器实例。
这里假定你使用express框架(因为这个最简单方便),如以下代码:
// 引入需要的模块:http和express var http = require('http'); var express = require('express'); var path = require('path'); var app = express(); //设置public为静态目录 app.use(express.static(path.join(__dirname, 'public'))); app.set('port', '80'); var server = http.createServer(app); //启动服务器 server.listen(80); //以上服务器创建完毕,这个时候可以引入socket.io了 //创建socket var io = require('socket.io')(server);
初始化之后,会返回一个对象io;
用这个对象去监听connection事件,然后在回调函数里传的参数,就是每一个用户的websocket实例;
可以用这个实例对该用户发送信息,或者监听用户发出的信息等。
//添加连接监听 io.on('connection', function (socket) { console.log("Clent has connectioned"); var number = 0; //连接成功则执行下面的监听 socket.on('message', function (event) { console.log('Received message from client!', event); number++; socket.emit("receiveMessage", new Date() + ":客户端第" + number + "次发送信息"); }); //断开连接callback socket.on('disconnect', function () { console.log('Clent has disconnected'); }); });
可以见我写的最简单的示例DEMO:baseApp.js
down下来之后使用
node baseApp.js来运行。(记得要先
npm install安装依赖)
基本页面是
http://localhost/base.html
我的github示例DEMO(包括最简单的示例DEMO以及一个网络对战版五子棋)
https://github.com/qq20004604/Backgammon-websocket
相关文章推荐
- HTML5之WebSocket入门3 -通信模型socket.io
- websocket入门(2)——使用socket.io实现网络对战版五子棋
- HTML5之WebSocket入门3 -通信模型socket.io
- 入门WebSocket和socket.io,实现在线实时聊天室
- iOS Client 与WebSocket 通信 入门demo 即时通讯 socketio
- 突袭HTML5之WebSocket入门3 - 通信模型socket.io
- 使用socket.io和node.js搭建websocket应用
- node.js中的socket.io入门实例
- node.js中的socket.io入门实例
- socket.io使用入门
- io.js入门(一)—— 初识io.js
- socket.io入门整理
- nodejs与websocket的库socket.io的应用
- java|android 使用socket.io-client连接nodejs websocket
- (转)使用Node.js+Socket.IO搭建WebSocket实时应用
- 使用Node.js+Socket.IO搭建WebSocket实时应用
- java|android 使用SocketIO.jar连接nodejs websocket
- Socket.IO – 基于 WebSocket 构建跨浏览器的实时应用
- 基于Node.js + socket.io实现WebSocket的聊天DEMO
- AndroidAsync :异步Socket,http(client+server),websocket和socket.io的Android类库