【Node之web通信Socket.IO】

发布时间:2019-06-06 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了【Node之web通信Socket.IO】脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

环境: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

<script src="./socket.io.js"></script>
<script>
    var socket = io.connect("http://127.0.0.1:3000");
</script>

上面代码中,我们先执行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

<script src="./socket.io.js"></script>
<script>
    var socket = io.connect("http://127.0.0.1:3000");
    socket.on("message", data => console.log(data));
    //收到消息“welcome”
</script>

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

<script src="./socket.io.js"></script>
<script>
    var hello = io.connect("http://127.0.0.1:3000/hello");
    var msg = io.connect("http://127.0.0.1:3000/msg");
    hello.on("message", data => console.log(data));
    msg.on("message", data => console.log(data))
</script>

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


END

脚本宝典总结

以上是脚本宝典为你收集整理的【Node之web通信Socket.IO】全部内容,希望文章能够帮你解决【Node之web通信Socket.IO】所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。