web Socket和Socket.IO框架

更新日期: 2019-04-21阅读: 2.6k标签: socket

HTTP无法轻松实现实时应用:

● HTTP协议是无状态的,服务器只会响应来自客户端的请求,但是它与客户端之间不具备持续连接。

● 我们可以非常轻松的捕获浏览器上发生的事件(比如用户点击了盒子),这个事件可以轻松产生与服务器的数据交互(比如Ajax)。但是,反过来却是不可能的:服务器端发生了一个事件,服务器无法将这个事件的信息实时主动通知它的客户端。只有在客户端查询服务器的当前状态的时候,所发生事件的信息才会从服务器传递到客户端。


方法:

● 长轮询:客户端每隔很短的时间,都会对服务器发出请求,查看是否有新的消息,只要轮询速度足够快,例如1秒,就能给人造成交互是实时进行的印象。这种做法是无奈之举,实际上对服务器、客户端双方都造成了大量的性能浪费。

● 长连接:客户端只请求一次,但是服务器会将连接保持,不会返回结果(想象一下我们没有写res.end()时,浏览器一直转小菊花)。服务器有了新数据,就将数据发回来,又有了新数据,就将数据发回来,而一直保持挂起状态。这种做法的也造成了大量的性能浪费。

 

WebSocket协议能够让浏览器和服务器全双工实时通信,互相的,服务器也能主动通知客户端了。

● WebSocket的原理非常的简单:利用HTTP请求产生握手,HTTP头部中含有WebSocket协议的请求,所以握手之后,二者转用TCP协议进行交流(QQ的协议)。现在的浏览器和服务器之间,就是QQ和QQ服务器的关系了。

所以WebSocket协议,需要浏览器支持,更需要服务器支持。

● 支持WebSocket协议的浏览器有:Chrome 4、火狐4、IE10、Safari5

● 支持WebSocket协议的服务器有:Node 0、Apach7.0.2、Nginx1.3

 

Node.js上需要写一些程序,来处理TCP请求。

● Node.js从诞生之日起,就支持WebSocket协议。不过,从底层一步一步搭建一个Socket服务器很费劲(想象一下Node写一个静态文件服务都那么费劲)。所以,有大神帮我们写了一个库Socket.IO。

● Socket.IO是业界良心,新手福音。它屏蔽了所有底层细节,让顶层调用非常简单。并且还为不支持WebSocket协议的浏览器,提供了长轮询的透明模拟机制。

● Node的单线程、非阻塞I/O、事件驱动机制,使它非常适合Socket服务器。

网址:http://socket.io/

 

先要npm下载这个库

npm install socket.io

写原生的JS,搭建一个服务器,server创建好之后,创建一个io对象

var http = require("http");     
var server = http.createServer(function(req,res){
       res.end("你好");
});
var io = require('socket.io')(server);
//监听连接事件
io.on("connection",function(socket){
       console.log("1个客户端连接了");
})
server.listen(3000,"127.0.0.1");

写完这句话之后,你就会发现,http://127.0.0.1:3000/socket.io/socket.io.js  就是一个js文件的地址了。

现在需要制作一个index页面,这个页面中,必须引用秘密js文件。调用io函数,取得socket对象。

<!DOCTYPE html>
      <html lang="en">
       <head>
              <meta charset="UTF-8">
              <title>Document</title>
      </head>
      <body>
            <h1>我是index页面,我引用了秘密script文件</h1>
            <script type="text/javascript" src="/socket.io/socket.io.js"></script>
            <script type="text/javascript">
                    var socket = io();
           </script>
    </body>
</html>

此时,在服务器上,app.js中就要书写静态文件呈递程序,能够呈递静态页面。

var server = http.createServer(function(req,res){
       if(req.url == "/"){
               //显示首页
               fs.readFile("./index.html",function(err,data){
                     res.end(data);
               });
      }
 });

至此,服务器和客户端都有socket对象了。服务器的socket对象:

 

服务器端的:

var io = require('socket.io')(server);
//监听连接事件
io.on("connection",function(socket){
    console.log("1个客户端连接了");
    socket.on("tiwen",function(msg){
        console.log("本服务器得到了一个提问" + msg);
        socket.emit("huida","吃了");
    });
});


每一个连接上来的用户,都有一个socket。 由于我们的emit语句,是socket.emit()发出的,所以指的是向这个客户端发出语句。

广播,就是给所有当前连接的用户发送信息:

//创建一个io对象
 var io = require('socket.io')(server);
 //监听连接事件
 io.on("connection",function(socket){
        console.log("1个客户端连接了");
        socket.on("tiwen",function(msg){
            console.log("本服务器得到了一个提问" + msg);
             io.emit("huida","吃了");
         });
});


链接: https://www.fly63.com/article/detial/2956

Nginx 转发 socket 端口配置

Nginx 转发 socket 端口常见场景:在线学习应用,在常规功能之外,增加一个聊天室功能,后端选择 swoole 提供服务提供者,同时不想前端直接 ip:port 方式链接到服务,需要使用 Nginx 进行转发。

websocket.io

服务器端:使用express服务;简单的使用websocket.io;使用命名空间 实例中两个命名空间info job;客户端 vue为例引入socket.io-client

Socket通信原理.一文了解Socket

Socket 的中文翻译过来就是“套接字”。套接字是什么,我们先来看看它的英文含义:插座。Socket 就像一个电话插座,负责连通两端的电话,进行点对点通信,让电话可以进行通信,端口就像插座上的孔,端口不能同时被其他进程占用。而我们建立连接就像把插头插在这个插座上

Vue.js 如何使用 Socket.IO

Socket.IO是一个WebSocket库,可以在浏览器和服务器之间实现实时,双向和基于事件的通信。它包括:Node.js服务器库、浏览器的Javascript客户端库。它会自动根据浏览器从WebSocket、AJAX长轮询、

轮询、长轮询、长连接、socket连接、WebSocket

轮询:客户端定时向服务器发送Ajax请求,服务器接到请求后马上返回响应信息并关闭连接;长轮询:客户端向服务器发送Ajax请求,服务器接到请求后hold住连接,直到有新消息才返回响应信息并关闭连接

封装小程序的websocket

这两天的工作中,我重构了一个项目里的客服聊天功能,是小程序的,用了小程序提供的websocket有关的接口,我感觉很简单,和web端的接口大体一致,不过我喜欢封装后去使用,封装成一个类,创建一个类的实例

使用Promise封装Websocket

await 后面若是跟的Promise,则接受Promise resolve的值。Promise reject的值需要try...catch住,或者await 后面的表达式跟着.catch()

socket.io的接入使用

传统的客户端和服务器通信协议是HTTP:客户端发起请求,服务端进行响应,服务端从不主动勾搭客户端。这种模式有个明显软肋,就是同步状态。而实际应用中有大量需要客户端和服务器实时同步状态的场景

如何在 React 中正确的使用 socket.io 客户端?

最近在一个 React 项目中,使用到了 socket.io 处理即时消息,这里面有几点容易被忽视的问题,例如:在 React 单页面应用中如何防止出现多个 socket 实例、在任意的的组件内如何方便的取到 socket 实例

Web 全栈推拉能手 Socket.IO 库

Socket.IO 不仅支持 WebSocket,还支持许多种轮询机制以及其他实时通信方式,并封装了通用的接口。这些方式包含 Adobe Flash Socket、Ajax 长轮询、Ajax multipart streaming 、持久 Iframe、JSONP 轮询等

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!