资讯专栏INFORMATION COLUMN

【Node之web通信Socket.IO】

xzavier / 3397人阅读

摘要:简介是的一个模块,他提供通过进行通信的一种简单方式,协议很复杂,但是提供了服务器和客户端双方的组件,所以只需要一个模块就可以给应用程序加入对的支持。而且还能支持不同的浏览器。它们之间有什么区别呢区别在于的是持久性的。

环境:Node v8.2.1; Npm v5.3.0; OS Windows10

在web开发中,我们使用HTTP协议,HTTP协议是基于文本的“单向”通讯机制,当我们想要从服务端获取数据的时候目前首选当然是Ajax,Ajax无疑是动态Web页面的一个重大发展,他不再需要我们即使更新一点内容,也需要刷新整个页面了,但是当我们在服务端将数据推送到客户端的时候,Ajax就显得力不从心了。如果我们使用Socket构建一个双向的机制,那么服务端向客户端推送数据也就简单了。

1、Socket.IO简介

Socket.IO是Node.js的一个模块,他提供通过WebSocket进行通信的一种简单方式,WebSocket协议很复杂,但是Socket.IO提供了服务器和客户端双方的组件,所以只需要一个模块就可以给应用程序加入对WebSocket的支持。而且还能支持不同的浏览器。
【API手册】

2、一些例子 2.1 基础应用

server.js

const http = require("http"),
    io = require("socket.io");
    
const server = http.createServer((req, res) => {
    res.end();
}).listen(3000);

// 交由 Socket.io 接管 
const socket=io.listen(server);

// 客户端socket连接时
socket.on("connection",client=>{
    console.log("web connected");
})

上面代码中,当客户端连接时,服务端会同时触发两个事件:server.onRequest 和 Socket.onConnection。它们之间有什么区别呢?区别在于 Socket 的是持久性的。

index.html


上面代码中,我们先执行server.js,然后再浏览器中访问index.html的时候控制台会打印"web connected"

2.2 向客户端推送数据

server.js

const http = require("http"),
    io = require("socket.io");
    
const server = http.createServer((req, res) => {
    res.end();
}).listen(3000);

const socket = io.listen(server);

socket.on("connection", client => {
    client.send("welcome")
})

上面服务端代码,在有客户端socket成功连接之后会向客户端推送一个“welcome”。

index.html


2.3 广播消息

上面是对单个客户端的消息推送,当我们有客户端连接的时候如果我们想对所有正在连接的客户端发送消息的时候,也就是广播消息。Socket.IO中提供了API可以很简单的实现广播

server.js

const http = require("http"),
    io = require("socket.io");
    
const server = http.createServer((req, res) => {
    res.end();
}).listen(3000);

const socket = io.listen(server);

socket.on("connection", client => {
    //广播消息
    client.broadcast.send("新用户上线了");
})

【注意!!】这儿的广播消息不会广播自己

2.4 多个Socket连接

上面的例子中都是一个页面只有一个Socket的连接,这儿列举一个多Socket连接的例子

server.js

const http = require("http"),
    io = require("socket.io");

const server = http.createServer((req, res) => {
    res.end();
}).listen(3000);

const socket = io.listen(server);

//针对特定的socket连接
socket.of("/hello").on("connection",client=>{
    client.send("hello")
})

socket.of("/msg").on("connection",client=>{
    client.send("msg")
})

index.html


上面代码中在一个页面中建立了两个WebSocket连接

END

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/88955.html

相关文章

  • Web Socket & Socket.io

    摘要:但是,反过来却是不可能的服务器端发生了一个事件,服务器无法将这个事件的信息实时主动通知它的客户端。这种做法是无奈之举,实际上对服务器客户端双方都造成了大量的性能浪费。用于发送,用户接受。 HTTP HTTP无法轻松实现实时应用: HTTP协议是无状态的,服务器只会响应来自客户端的请求,但是它与客户端之间不具备持续连接。 我们可以非常轻松的捕获浏览器上发生的事件(比如用户点击了盒子),...

    gougoujiang 评论0 收藏0
  • node技术栈 - 收藏集 - 掘金

    摘要:异步最佳实践避免回调地狱前端掘金本文涵盖了处理异步操作的一些工具和技术和异步函数。 Nodejs 连接各种数据库集合例子 - 后端 - 掘金Cassandra Module: cassandra-driver Installation ... 编写 Node.js Rest API 的 10 个最佳实践 - 前端 - 掘金全文共 6953 字,读完需 8 分钟,速读需 2 分钟。翻译自...

    王伟廷 评论0 收藏0
  • WebSocketSocket.IO

    摘要:当数据发生变化,便将数据发送给。与网络应用中,两个应用程序同时需要向对方发送消息的能力即全双工通信,所利用到的技术就是,其能够提供端对端的通信。其不仅支持,还支持许多种轮询机制以及其他实时通信方式,并封装了通用的接口。 WebSocket 与 Socket.IO 最近小组在做一个智慧交通的项目,其中有个 分享屏幕 的功能,即一个 client 能够将自己当前的页面分享到另外一个 cli...

    snifes 评论0 收藏0
  • socket.io+express实现聊天室的思考(一)

    摘要:但是需要注意的一点是协议是建立在协议基础之上的,需要经过一次握手。所以连接的发起方仍是客户端。是一个简洁而灵活的应用框架提供一系列强大特性帮助你创建各种应用。这也是为什么要采用协议来实现聊天室的原因。 从开始写到完善差不多断断续续差不多半个月时间,虽然还没有打到想要的效果但还是阶段性总结一下。(下一步加入打算视频通讯功能)本文默认你已掌握 node 相关基础知识 GitHub地址:ht...

    fjcgreat 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<