1. 简介
Web领域的实时推送技术,让用户不需要刷新浏览器就可以获得实时更新.它有着广泛的应用场景,比如在线聊天室、在线客服系统、评论系统等.在WebSocket出现之前,很多网站为了实现实时推送技术,通常采用的方案是轮询 (Polling)和Comet技术
socket.io(插口)是一个WebSocket库,包括了客户端的js和服务器端的nodejs,它的目标是构建可以在不同浏览器和移动设备上使用的实时应用。它会自动根据浏览器从WebSocket、AJAX长轮询、Iframe流等等各种方式中选择最佳的方式来实现网络实时应用,非常方便和人性化,而且支持的浏览器最低达IE5.5,可以满足绝大部分需求。
2.安装
进入目录,在node.js环境下键入:npm install socket.io
3.例子:结合express来构建服务器
express是一个Node.js的Web应用框架,在构建HTTP服务器时经常使用到,所以直接以Socket.IO和express为例子
var express = require('express'), app = express(), server = require('http').createServer(app), io = require('socket.io').listen(server); server.listen(3000);
基本使用方法:主要分为服务器端和客户端两段代码
Server(app.js):服务器端
//接上面的代码 app.get('/', function (req, res) { res.sendfile(__dirname + '/index.html');}); io.sockets.on('connection', function (socket) { socket.emit('news', { hello: 'world' }); socket.on('other event', function (data) { console.log(data); }); });
首先io.sockets.on函数接受字符串connection作为客户端发起连接的事件,当连接成功后,调用带有socket参数的回调函数.使用socket.IO的时候,基本上都在这个回调函数里面处理用户的请求
在上面的例子中,我们发送了news事件和收到了other event事件,那么客户端应该会有对应的接收和发送事件。而且客户端代码和服务器正好相反,且非常相似
socket最关键的是emit和on两个函数,
socket.emit:提交/发出一个事件(事件名称用字符串表示),事件名称可以自定义,也有一些默认的事件名称,紧接着是一个对象,表示向该socket发送的内容;
socket.on:接收一个事件(事件名称用字符串表示),紧接着是收到事件调用的回调函数,其中data是收到的数据
例如:station/index.js里 socket.emit(''+queueConfStation.sta_id, pkg); //pkg是对象 gnss/server/config/messagequeue.js里 socket.on('' + socket.handshake.query.station, function (data) { //......... }
Client(client.js):客户端
<script src="/socket.io/socket.io.js"></script> <script> var socket = io.connect('http://localhost'); socket.on('news', function (data) { console.log(data); socket.emit('other event', { my: 'data' }); }); </script>
事件处理:上面的代码表示收到news事件后,打印收到的数据,并向服务器发送other event事件。
有两点要注意的:socket.io.js路径要写对,这个js文件实际放在了服务器端的node_modules文件夹中,在请求这个文件时会重定向,因此不要诧异服务器端不存在这个文件但为什么还能正常工作。当然,可以把服务器端的socket.io.js这个文件拷贝到本地,使它成为客户端的js文件,这样就不用每次都向Node服务器请求这个js文件,增强稳定性。第二点是要用var socket = io.connect(网站地址或ip);来获取socket对象,接着就可以使用socket来收发事件
注意:内置默认的事件名例如disconnect表示客户端连接断开,message表示收到消息等等。自定义的事件名称,尽量不要跟Socket.IO中内置的默认事件名重名,以免造成不必要的麻烦
扩展:
①为了建立一个WebSocket连接,客户端浏览器首先要向服务器发起一个HTTP请求,这个请求和通常的HTTP请求不同,包含了一些附加头信 息,其中附加头信息”Upgrade: WebSocket”表明这是一个申请协议升级的HTTP请求,服务器端解析这些附加的头信息然后产生应答信息返回给客户端,客户端和服务器端的 WebSocket连接就建立起来了,双方就可以通过这个连接通道自由的传递信息,并且这个连接会持续存在直到客户端或者服务器端的某一方主动的关闭连 接。
②Socket.IO通过Node.js实现WebSocket服务端,同时也提供客户端JS库。Socket.IO支持以事件为基础的实时双向通讯,它可以工作在任何平台、浏览器或移动设备
③Socket.IO支持4种协议:WebSocket、htmlfile、xhr-polling、jsonp-polling,它会自动根据浏览器选择适合的通讯方式,从而让开发者可以聚焦到功能的实现而不是平台的兼容性,同时Socket.IO具有不错的稳定性和性能
相关推荐
1. **服务器端设置**:在Node.js项目中,导入`socket.io`模块,初始化服务器并监听特定端口,然后使用`io.on('connection', (socket) => {})`来处理新连接和事件。 2. **客户端连接**:在Java或Android应用中,导入...
- `<script src="/socket.io/socket.io.js"></script>` 引入Socket.IO客户端脚本。 - `var socket = io('http://localhost')` 创建Socket.IO客户端实例,连接到服务器。 - `socket.on('news', ...)`: 监听服务器发送...
<script src="/socket.io/socket.io.js"> const socket = io(); let username = prompt("请输入您的昵称:"); socket.emit('newUser', username); socket.on('usersConnected', (count) => { document....
1. **main.js** - Vue.js应用的入口文件,可能包含了Vue实例的创建,以及引入其他模块如socket.io-client和WebRTC相关的库。 2. **App.vue** - 应用的主组件,可能包含视频通话的基本布局和逻辑。 3. **components**...
而Socket.IO则是在Node.js之上构建的一个强大的库,不仅提供了WebSocket的完整实现,还支持多种回退方案以确保良好的兼容性。 - **Node.js的优势**: - **异步非阻塞I/O**:这使得Node.js能够高效处理大量并发连接...
作为GitHub上功能强大的JavaScript框架之一,以及NPM(Node Package Manager,Node包管理器)上最受依赖的模块之一,开发者在使用Socket.IO过程中遇到问题时,很容易找到相关的帮助和资源。 要在项目中使用Socket....
【Node.js-网站在线客服基于socket.io和node】 在当今的Web开发中,实时通信已经成为一个重要的需求,尤其是在构建互动性强、用户体验丰富的在线客服系统时。Node.js以其非阻塞I/O和事件驱动的特性,成为了实现此类...
这将允许rollup处理非ES模块,如`socket.io-client`。 6. **编写typescript代码**: 在Cocos Creator的`src`目录下,创建一个新文件,例如`socketManager.ts`,编写你的socket.io客户端代码。例如: ```...
<script src="https://cdn.socket.io/4.1.2/socket.io.min.js"> #messages { list-style-type: none; margin: 0; padding: 0; } #messages li { padding: 5px 10px; } #input { width: 100%; box-sizing: ...
<script src="/socket.io/socket.io.js"> const socket = io('***'); // 监听服务器发送的消息 socket.on('message', function(msg) { console.log('Received message:', msg); }); // 发送消息到...
在"Node.js-node.js利用socket.io实现多人在线匹配联机五子棋"这个项目中,我们将会讨论如何利用Node.js和Socket.IO来创建一个实时的多人在线五子棋游戏。五子棋是一种简单但策略丰富的两人对弈游戏,通过网络实现...
3. **客户端连接**:在 HTML 页面中引入 socket.io 的客户端库,并使用 `io.connect()` 连接到服务器。 4. **事件监听与发送**:使用 `socket.on()` 监听服务器发送的消息,同时使用 `socket.emit()` 发送消息到...
- **概念**:Socket.IO是一个实时应用框架,可在Node.js服务器和浏览器之间建立低延迟、高可靠的双向连接。 - **协议**:它支持WebSocket及其他多种传输协议,如HTTP长轮询、xhr-polling等,以应对不同的网络环境...
它有一套丰富的生态系统,包含了大量的NPM(Node Package Manager)模块,其中就包括了`socket.io`。 `socket.io`库是Node.js中用于创建实时应用的重要工具,它兼容WebSocket协议,并在WebSocket不适用或不可用时...
【Node.js-高仿Agar.io源码使用Socket.IO和HTML5canvas编写】 在Web开发领域,Node.js因其异步非阻塞I/O模型而备受青睐,尤其在构建实时交互应用时表现出色。本项目“高仿Agar.io源码”就是基于Node.js的这一特性,...
通常会在HTML页面中引入`socket.io.js`文件,并使用`io.connect()`方法建立连接。之后,可以监听服务器事件并发送自定义事件。 8. **事件驱动编程**: Node.js和Socket.IO都基于事件驱动架构,开发者通过监听和触发...
安装socket.io npm install socket.io 上述就是socket.io的安装步骤,但是很有可能会失败。 1.no such file or directory 解决方案:这是因为当前安装目录缺少package.json文件,初始化一下npm即可: npm init -y ...
在本项目中,我们探索的是如何使用 Node.js、Socket.IO 和 Enchant.js 构建一个聊天游戏。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境,它让开发者可以在服务器端使用 JavaScript 编程。Socket.IO 是...
在Node.js环境下,Socket.IO可以作为模块被轻易引入,使Node.js能够轻松地实现服务器端对WebSocket的支持。不仅如此,Socket.IO客户端库支持各种浏览器和平台,包括移动设备,甚至可以在不具备WebSocket支持的老旧...