话说在很久很久以前。Web页面与客户的本地电脑Localhost通讯，有两种方式：

1。Flash　　2。ActiveX控件

由于Flash本人不是很了解，也给出不了什么示例代码，

对于ActiveX控件来说，可以直接在在网络上搜索“ActiveX控件”，就会有很多相关的答案

但是：

　　对于现代浏览器来说，以上两种方式都通通不支持了

　　对于Flash来说，虽然现在浏览器还有支持，但是都不是默认加载Flash插件了

　　要用户手工点同意才会加载。

　　对于ActiveX控件来说，只在IE浏览器里面才受支持，而且也要用户同意，更别说现代浏览器了

所以说。对于现代的浏览器。要与本地电脑通讯。上面两种方式已经行不通了。

那有没有不要用户点同意，就可以直接通过Web页面与本地电脑通讯呢？

答案是当然有了。不然也不会有此文章了。

对于Web与服务器通讯，我们走的是HTTP协议。这也是所有浏览器都支持的
也不会管现在浏览器和远古时代的浏览器也都支持HTTP协议。

那么

如果Web要与本地电脑通讯，只要Web与本地电脑走HTTP协议通讯。问题不就解决了吗？

那怎么实现呢？

既然要与本地电脑走HTTP协议通讯，那本地就必需要有一个支持HTTP协议的通道
平常我们与远程服务器通讯是怎么访问的，比如说百度吧，我们输入http://www.baidu.com就能正常打开了
那我们本地怎么办呢，我们做开发测试的时候，是不是输入：http://localhost 或者 http://127.0.0.1是不是就访问的我们本地电脑
那么，我们在页面里向本地发送一个请求。会有什么结果？

我们来实验一下：

首先，既然要与本地服务器通讯。那么我们在本地要监听一下本地的http协议通讯，代码如下

namespace LocalApp

{

    class Program

    {

        public static HttpListener listener = new HttpListener();

        static void Main(string[] args)

        {

            listener.Start();

            listener.Prefixes.Add("http://127.0.0.1:8976/");//我们监听本地电脑8976端口的HTTP协议

            Thread t = new Thread(new ThreadStart(clientListener));

            t.Start();

            while (true)

            {

                string s = Console.ReadLine();

                listener.Stop();

                listener.Close();

            }

        }

        public static void clientListener()

        {

            while (true)

            {

                try

                {

                    //如果收到讲求，我们就开启一个线程去处理请求

                    HttpListenerContext request = listener.GetContext();

                    ThreadPool.QueueUserWorkItem(processRequest, request);

                }

                catch (Exception e) { Console.WriteLine(e.Message); }

            }

        }

        public static void processRequest(object listenerContext)

        {

            try

            {

                var context = (HttpListenerContext)listenerContext;

                var dicPar = new Dictionary<string, string>();

                var listPar = new List<string>();

                //拿到请求参数

                foreach (var item in context.Request.QueryString.AllKeys)

                {

                    listPar.Add(String.Format("{0}={1}", item, context.Request.QueryString[item]));

                    dicPar.Add(item, context.Request.QueryString[item]);

                }

                //设置返回值

                var resultJson = JsonConvert.SerializeObject(dicPar);

                Console.WriteLine(String.Join(Environment.NewLine, listPar));

                context.Response.StatusCode = (int)HttpStatusCode.OK;

                context.Response.ContentLength64 = System.Text.Encoding.UTF8.GetByteCount(resultJson);

                context.Response.ContentType = "application/json";

                context.Response.ContentEncoding = Encoding.UTF8;

                context.Response.Headers.Add("Access-Control-Allow-Origin", "*");

                //返回结果

                System.IO.Stream output = context.Response.OutputStream;

                using (StreamWriter writer = new StreamWriter(output))

                {

                    writer.Write(resultJson);

                    writer.Close();

                }

            }

            catch

            {

            }

        }

    }

}

上面的代码就是监听本地电脑8976端口的HTTP协议，
如果收到请求。就提取参数，然后以Json的形式返回

那么，我们写一个Html页面，向本地8976端口发送数据会出现什么情况
代码如下：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title></title>

    <script src="Scripts/jquery-3.3.1.js"></script>

</head>

<body>

    <form id="form1" enctype="application/x-www-form-urlencoded">

        <div><label>参数1：<input type="text" name="Par1" /></label></div>

        <div><label>参数2：<input type="text" name="Par2" /></label></div>

        <div><button type="button" onclick="btnSubmit()">提交</button></div>

    </form>

    <script>

        function btnSubmit() {

            $.get("http://127.0.0.1:8976/", $("#form1").serialize(), function (result) {

                console.log(result);

            }, "json");

        }

    </script>

</body>

</html>

打开Chrome浏览器做一下测试。结果如下：

页面成功的发起了请求，本地电脑APP也监听到了Web发来了请求，参数也都拿到了。
是不是我们就可以用这种方式用Web端来调用本地电脑的资源了

以知问题：

当我们的站点是以https访问的时候，如果用http去请求本地资源，而不是用https去请求的话，有些浏览器会报Mixed Content错误
但是在新版本的谷歌与火狐已经解决了此问题，参考：https://bugzilla.mozilla.org/show_bug.cgi?id=903966

另外一个有一个秘密，一般人我不告诉他
你们知道当你们在本地登录了QQ后，然后打开QQ的Web站点，他为什么就能自动知道你当前登录的QQ吗？

没错，他也用了这种方案与QQ通讯，从而知道你登录了哪个QQ，这样才会有此快速登录的功能

思维扩展：
这种访案只能是Web发起请求，本地电脑接受请求。只支持单一方向通讯，
那么，有没有支持双向通讯的方案呢？（Web到本地，本地到Web）
如果有知道答案的。可以在此博文下说出你的想法。

细说Web页面与本地电脑通讯的更多相关文章

  1. 【问题记录】— web页面调用本地程序

    起因: 最近由于项目需要在web页面中调用本地部署的exe程序:进而对该功能实现做了对应了解:以及存在的问题进行记录. 要实现该功能就不得不说浏览器自定义协议:解决办法:那么它是什么呢? 浏览器自定义 ...

  2. web页面打开本地app（判断是否安装）

    在应用宝中有APP申请链接: //是否可以打开App不可以跳则到下载页 $(".downNow button").on("click",function(){ ...

  3. web页面和本地数据对比问题

    缘起 最近工作上出现了遇到了几个类似的问题:页面上有值,excel里有值,需要比较二者是否一致.小麻烦有:1.对于页面上的值,有时是页面表格里的一列或几列,无法直接勾选并复制出来.即便复制出来,也很不 ...

  4. 在页面获取本地电脑IP

    <%@ page language="java" import="java.util.*" contentType="text/html; ch ...

  5. 【Egret】实现web页面操作PC端本地文件操作

    Egret 实现web页面操作PC端本地文件操作: http://edn.egret.com/cn/book/page/pid/181 //------------------------------ ...

  6. 【Eclipse】eclipse部署web项目至本地的tomcat但在webapps中找不到

    clipse部署web项目至本地的tomcat但在webapps中找不到 1.发现问题 在我的 eclipse 中有个Dynamic Web Project(动态web项目),在本地的 tomcat ...

  7. PHP关于web页面交互内容

    学php学了有一段时间了总结总结给大家分享一下 PHP中的引用 第一段程序: <?php $first_name="firstName"; $first=&$firs ...

  8. 如何在本地电脑安装phpmyadmin及访问地址

    因为要安装wordpress,上网查了下安装wordpress前要安装phpmyadmin,前提是要在自己本地电脑上安装APMSeverx虚拟主机才可以,在本地访问phpmyadmin页面.下面的步骤 ...

  9. base64：URL背景图片与web页面性能优化

    一.base64百科 Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一,可用于在HTTP环境下传递较长的标识信息. 某人: 唉,我彻底废柴了,为何上面明明是中文,洒家却看不懂嘞,为什 ...

随机推荐

  1. 从嵌入式linux到android应用开发

      时间过得很快,转眼之间已经到新公司一个月了.虽然学到了一些移动开发的知识,但是觉得离我的目标还很远,完全没能达到我想要的水平.以前产品都是自己主导的,需要完成什么,计划什么也是自己主导,现在得从头 ...

  2. 06 Activity隐式跳转

    一,隐式跳转 某个Activity 需要在清单文件配置某个Activity如下信息: 注意:category要和action一起用 action:制定一个活动 在隐式跳转的可以用到 category ...

  3. eclipse导入已有工程

    eclipse不同的版本,导致导入已有工程的方法不同.老版本中使用的是新建java工程,然后选择根据已经存在的project创建,就可以了. 但我的是version: Helios Service R ...

  4. Dynamics CRM2013 Server2012下部署ADFS和IFD遇到的问题No Organization were retrived

    最近一直在折腾Windows Server2012下的IFD部署,其中各种纠结啊错误百出,要想顺利的一步到位只能说看你的RP怎么样了,具体的操作过程推荐看下勇哥的博客:http://luoyong02 ...

  5. Leetcode_104_Maximum Depth of Binary Tree

    本文是在学习中的总结,欢迎转载但请注明出处:http://blog.csdn.net/pistolove/article/details/41964475 Maximum Depth of Binar ...

  6. How to SetUp The Receiving Transaction Manager

    In this Document   Goal   Solution   References APPLIES TO: Oracle Inventory Management - Version: 1 ...

  7. 【算法导论】八皇后问题的算法实现（C、MATLAB、Python版）

    八皇后问题是一道经典的回溯问题.问题描述如下:皇后可以在横.竖.斜线上不限步数地吃掉其他棋子.如何将8个皇后放在棋盘上(有8*8个方格),使它们谁也不能被吃掉?         看到这个问题,最容易想 ...

  8. 【Qt编程】Qt学习之状态栏

    QStatusBar类提供一个水平条来显示状态信息.所谓状态信息,拿个简单的例子来说,当你在word中编辑时,左下角就会出现页面.字数等等信息.状态信息可以分为三类:临时信息,如一般的提示信息:正常信 ...

  9. 停止预览时调用Camera.release(), 出现Method called after release()异常问题原因及解决办法

    如下代码: private void stopPreview() { Log.w(TAG, "stopPreview(), _isPreviewing = " + _isPrevi ...

  10. git remote

    在git里,服务器上的仓库在本地称之为remote. 直接clone一个仓库: $: git clone git@search.ued.taobao.net:projects/search.git 另 ...