web Socket和Socket.IO框架指南攻略_Socket入门基础知识

HTTP无法轻松实现实时应用:● HTTP协议是无状态的,服务器只会响应来自客户端的请求,但是它与客户端之间不具备持续连接。● 我们可以非常轻松的捕获浏览器上发生的事件(比如用户点击了盒子),这个事件可以轻松产生与服务器的数据交互(比如Ajax)。但是,反过来却是不可能的:服务器端发生了一个事件,服务器无法将这个事件的信息实时主动通知它的客户端。只有在客户端

web Socket和Socket.IO框架指南攻略

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

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

web Socket和Socket.IO框架指南攻略_Socket入门基础知识

● 我们可以非常轻松的捕获浏览器上发生的事件(比如用户点击了盒子),这个事件可以轻松产生与服务器的数据交互(比如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","吃了");
         });
});
海计划公众号
(0)
上一篇 2020/03/30 16:07
下一篇 2020/03/30 16:07

您可能感兴趣的内容

  • 网站建设目标是什么?及对网站质量评价标准基础入门_网站基础知识入门

    网站建设初期的目标营销渠道中,主要分为导流、沟通、交易和服务四个阶段有了你完成交易的用户,售后问题,包括电话,面对面的沟通,网站可以带来流量,并且使用一个核心关键词,订单可能会产生,这就是企业网站的力量。网站的内容可以粗略地判断,内容质量越高,旧用户越多,新用户将再次访问你的网站,访问者对网站的信任度越高,页面上的广告也越多,许多网站管理员都急于通过收集和虚

    2020/03/23
  • vue-qr生成下载二维码小白帮助_二维码零基础入门

    安装vue-qrnpm install vue-qr –save生成二维码实列<vue-qr ref="Qrcode" :text="qrCodeConfig.text" :download="downloadFilename" :margin="10" :size="200" :dotScale="qrCodeConfig.dotScale" :col

    2020/03/29
  • Spectrum菜鸟知识_简单,强大的在线社区

    Spectrum菜鸟知识 官方网址:https://spectrum.chat GitHub:https://github.com/withspectrum/spectrum 简介…

    2020/03/06
  • 选择转行学习WEB前端,你必须要了解基本概念入门知识_前端小白帮助

    随着互联网开展,互联网的体系越多越多,越来越杂乱,用户不能满意基本功用的需求,对互联网体会要求越来越高,客户端与服务器的交互不在是简略页面和页面的交互,而变为页面和页面+程序+数据的交互,其间完成与客户交互和体会的程序就是Web前端工程师完成的,这时Web前端工程师就诞生了,跟着用户对体会和交互要求越高,体系功用越杂乱,Web前端工程师的岗位就越重要。1前端

    2020/03/29
  • video.js使用技巧基础知识教程_插件菜鸟知识

    1 初始化Video.js初始化有两种方式。1.1 标签方式一种是在

    2020/03/26
  • CSS层叠样式表攻略教程_样式小白基础

    简介层叠样式表,用来表现HTML或者XML等文件样式的计算机语言。网页表现与内容分离的样式设计语言,能够对网页中对象排版进行像素级精确控制,几乎支持所有字体字号,拥有对网页对象和模型样式编辑能力,并能进行初步交互设计使用方式(就近原则)1 元素内嵌样式表Hello2 文档类型样式表(head里)a

    2020/03/31
  • wunderbar小白教程_用于终端的简单漂亮水平柱状图

    wunderbar小白教程 官方网址:https://npm.im/@gribnoysup/wunderbar GitHub:https://github.com/gribnoys…

    2020/03/10
  • 网页中favicon.ico图标的作用、尺寸、制作小白入门_图标小白攻略

    favicon图标的作用:网站favicon.ico文件的用途很简单,就是在浏览器标签里,最前面显示的那个logo,不过好像很多新手做网站都没有留意这个图标怎么来的,因为编辑器代码里根本不写也会有个默认图片。不过总的来讲,这个图标还是自己定义比价好,起码作为一种“logo”,可以让人一眼就认出你的网站。默认的话,不需要写代码。直接在网站根目录放一个图片文件,

    2020/03/29
  • web前端性能优化指南指南教程_性能基础知识

    前端需要性能优化么?性能优化一直以来都是前端工程领域中的一个重要部分。很多资料表明,网站应用的性能优化对于提高用户留存、转化率等都有积极影响。可以理解为,提升你的网站性能,就是提升你的业务数据(甚至是业务收入)。性能优化广义上包含前端优化和后端优化。后端优化的关注点更多的时候是在增加资源利用率、降低资源成本以及提高稳定性上。相较于后端,前端的性能优化会更直接

    2020/03/24
  • js中bool值转换以及逻辑运算&&、||、 !!的使用零基础入门_js知识小白帮助

    js作为一门弱类型语言,导致几乎所有数据都能转换为bool的类型,js转换规则 如下:数据类型bool值转化Array 数组类型都为true,包括[]undefinedundefined 转化为 falseObjectnull 转化为false,其他为 true,包括{}也为trueBooleanfalse 转化为 false,true 转化为 trueNu

    2020/04/05
  • javascript如何判断对象是否相等?小白知识_对象菜鸟教程

    JavaScript作为一个基于对象(没有类的概念)的语言,从入门到精通到放弃一直会被对象这个问题围绕。下面我们就来看一下如何判断对象是否相等。判断对象相等的步骤:1、先判断俩者是不是对象2、是对象后俩者长度是否一致3、判断俩个对象的所有key值是否相等相同4、判断俩个对象的相应的key对应的值是否相同5、来一个递归判断里面的对象循环1-4步骤判断对象是否相

    2020/03/20
  • 浅谈对soket的理解入门基础_soket使用指南

    定义:网络上的两个程序通过一个双向的通信链实现数据的交换,这个链接的一端就成为Socket它是进程通信的一种,即调用这个网络库的api函数实现分布在不同主机相关进程之间的数据交换,依照tcp/ip协议分给每个主机的网络地址,如果两个主机要进行通信,任何一个进程都要首先知道对方的网络地址,也可以说是对方的IP。端口号用来辨别本地进程,一个本地的进程通信时,,都

    2020/04/03
  • 详解浏览器储存小白攻略_储存使用帮助

    引言随着对前端的了解越来越深入,了解到了很多种浏览器的存储方案,如 Cookie、LocalStorage等,哪这些存储方案有何异同,分别的适用场景又是什么呢。CookieCookie的来源Cookie 被创造出来的本意并不是本地储存,而是为了辨别用户身份。众所周知,Http 协议是无状态的,也就是说你每一次发送给服务器的请求对于服务器来说都是孤立的,服务器

    2020/03/22
  • Element UI入门基础知识一套基于 Vue 2.0 的桌面端组件库

    Element UI基础入门 官方网址:https://element.eleme.io GitHub:https://github.com/elemefe 简介描述:一套基于 V…

    2020/03/05
  • js中实现函数重载小白知识_重载菜鸟指南

    引言最近在js的学习中,看到了函数重载的问题,一开始,只看到了实现代码,看着代码冥思苦想了半个小时,总算是理清了其实现的原理,也为其实现的巧妙感到赞叹,也是在自己搞懂原理之后,去网络上搜索了下,才知道,这个实现方法是jQuery作者John Resig在《JavaScript忍者秘籍》中对函数重载的实现,设计十分的巧妙,写下此文,给大家做一个分享什么是函数的

    2020/03/24
  • Vue 和递归组件使用帮助_递归基础教程

    简介有人说递归很难理解,也有人不这么认为。递归函数简单的定义是:一个自调用函数,这意味着它将在执行的某个时刻调用自己。从理论上讲,递归是一种需要两个属性的行为:结束点:停止递归的情况一组规则:负责将所有的操作减少到结束点咱们无法决定哪一个更重要。如果没有结束点,递归将成为一个无限循环,但是如果一组规则就不能实现期望的行为,所以两者都存在才能使它正常工作。递归

    2020/03/23