细说Web页面与本地电脑通讯
话说在很久很久以前。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页面与本地电脑通讯的更多相关文章
- 【问题记录】— web页面调用本地程序
起因: 最近由于项目需要在web页面中调用本地部署的exe程序:进而对该功能实现做了对应了解:以及存在的问题进行记录. 要实现该功能就不得不说浏览器自定义协议:解决办法:那么它是什么呢? 浏览器自定义 ...
- web页面打开本地app(判断是否安装)
在应用宝中有APP申请链接: //是否可以打开App不可以跳则到下载页 $(".downNow button").on("click",function(){ ...
- web页面和本地数据对比问题
缘起 最近工作上出现了遇到了几个类似的问题:页面上有值,excel里有值,需要比较二者是否一致.小麻烦有:1.对于页面上的值,有时是页面表格里的一列或几列,无法直接勾选并复制出来.即便复制出来,也很不 ...
- 在页面获取本地电脑IP
<%@ page language="java" import="java.util.*" contentType="text/html; ch ...
- 【Egret】实现web页面操作PC端本地文件操作
Egret 实现web页面操作PC端本地文件操作: http://edn.egret.com/cn/book/page/pid/181 //------------------------------ ...
- 【Eclipse】eclipse部署web项目至本地的tomcat但在webapps中找不到
clipse部署web项目至本地的tomcat但在webapps中找不到 1.发现问题 在我的 eclipse 中有个Dynamic Web Project(动态web项目),在本地的 tomcat ...
- PHP关于web页面交互内容
学php学了有一段时间了总结总结给大家分享一下 PHP中的引用 第一段程序: <?php $first_name="firstName"; $first=&$firs ...
- 如何在本地电脑安装phpmyadmin及访问地址
因为要安装wordpress,上网查了下安装wordpress前要安装phpmyadmin,前提是要在自己本地电脑上安装APMSeverx虚拟主机才可以,在本地访问phpmyadmin页面.下面的步骤 ...
- base64:URL背景图片与web页面性能优化
一.base64百科 Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一,可用于在HTTP环境下传递较长的标识信息. 某人: 唉,我彻底废柴了,为何上面明明是中文,洒家却看不懂嘞,为什 ...
随机推荐
- Android的四个基本概念(线程通信和GLSurfaceView)
GLSurfaceView提供了下列特性: 1> 管理一个surface,这个surface就是一块特殊的内存,能直接排版到android的视图view上. 2> 管理一个EGL disp ...
- ExpandableListView简单应用及listview模拟ExpandableListView
首先我们还是来看一些案例,还是拿搜狐新闻客户端,因为我天天上下班没事爱看这个东东,上班又没时间看新闻,上下班路途之余浏览下新闻打发时间嘛. 看这个效果挺棒吧,其实实现起来也不难,我 ...
- C语言省略extern的缺陷
在一个文件中(比如a.c)定义一个全局变量int a = 10; 然后在另一个代码文件(比如main.c)中需要使用变量a,可以写 int a; 单独看main.c文件时就会出现二义性,一个含义是当其 ...
- vbox centos安装增强工具
就是虚拟机识别不了宿主机的usb接口,这个虚拟机有没有图形界面,看看怎么装. 一个是依赖包问题,另一个就是挂了安装包,但是我怎么找到它并安装上去的问题. 虚拟机是centos6.6哈 vbox4.3. ...
- Swing中经常会遇到的若干问题——JTable(持续更新)
本文是在学习中的总结,欢迎转载但请注明出处:http://blog.csdn.net/pistolove/article/details/40955213 (1)让组件在屏幕中央显示 public s ...
- linux杀死进程的简单讲解
一. 终止进程的工具kill .killall.pkill.xkill 终止一个进程或终止一个正在运行的程序,一般是通过kill .killall.pkill.xkill 等进行.比如一个程序已经死掉 ...
- (NO.00002)iOS游戏精灵战争雏形(七)
接上一篇博文,我们继续完成射击的功能. 还是在MainScene.m中,添加initBullets方法: -(void)initBullets{ CCSprite *bullet; for (int ...
- “基于数据仓库的广东省高速公路一张网过渡期通行数据及异常分析系统"已被《计算机时代》录用
今天收到<计算机时代>编辑部寄来的稿件录用通知,本人撰写的论文"基于数据仓库的广东省高速公路一张网过渡期通行数据及异常分析系统",已被<计算机时代>录 ...
- 《java入门第一季》之正则表达式常见规则
正则表达式规则不用记住,只是知道是做什么用的即可.常见规则如下: A:字符 x 字符 x.举例:'a'表示字符a \\ 反斜线字符. \n 新行(换行)符 ('\u000A') (\\n来表示换行) ...
- 结构体:探析C#文件方式读写结构体
最近直在研究Net Micro Framework字体文件(tinyfnt)由于tinyfnt文件头部有段描述数据所以很想 定义个结构体像VC样直接从文件中读出来省得用流个个解析很是麻烦 没有想到在中 ...