在Websocket出现之前,我们要实现和服务器端保持实时通信,只能采用long poll和ajax轮询,它们的原理都是让浏览器隔个几秒就发送一次请求,询问服务器是否有新信息。都是通过不断地建立HTTP连接,然后等待服务端处理, 这对应服务器来说消耗是非常大。在这样的前提下,Websocket就出现了,它很好的解决了http协议的被动型,这样服务端就能主动推送信息给客户端了。
WebSocket是html5下一种新的协议,为解决客户端与服务端实时通信而产生的技术。其本质是先通过HTTP/HTTPS协议进行握手后创建一个用于交换数据的TCP连接,此后服务端与客户端通过此TCP连接进行实时通信,能更好的节省服务器资源和带宽并达到实时通讯的目的。但是它和HTTP最大不同是:
WebSocket是一种双向通信协议。在建立连接后,WebSocket服务器端和客户端都能主动向对方发送或接收数据,就像Socket一样;
WebSocket需要像TCP一样,先建立连接,连接成功后才能相互通信。
传统HTTP客户端与服务器请求响应模式如下:
WebSocket客户端与服务器请求响应模式如:
从上图可以看出:WebSocket只需要经过一次HTTP请求,就可以做到源源不断的信息传送了。(在程序设计中,这种设计叫做回调,即:你有信息了再来通知我,而不是我傻乎乎的每次跑来问你),这样的协议解决了上面同步有延迟,而且还非常消耗资源的这种情况。
社交聊天、多玩家游戏、弹幕、协同编辑、股票基金实时报价、体育实况更新、视频会议/聊天、基于位置的应用、在线教育、智能家居等,都需要高实时的场景
function demo() {
if (window.WebSocket) {
//支持
} else {
//不支持
}
}
创建了Websocket实例,WebSocket构造函数的第二个参数既可以是字符串,也可以是字符串组,代表应用能够使用的协议;其中ws://和wss://前缀分别表示WebSocket连接和安全的WebSocket连接。
ws = new WebSocket("ws://127.0.0.1:8080/Server_Test.php");
w = new WebSocket(url);
//或w = new WebSocket(url,['proto1','proto2']);
ws.onopen = function(event){}
ws.onmessage = function(event){}
ws.onclose = function(event){}
ws.onerror = function(event)
ws.send('服务器,您好');
console.log(ws.readyState)
//1. 创建服务端WebSocket对象,等待客户端接入
$master = WebSocket("localhost",10000);
首先创建Websocket,然后服务端监听相应端口,等待客户端接入
function WebSocket($address,$port){
$master=socket_create(AF_INET, SOCK_STREAM, SOL_TCP) or die("socket_create() failed");
socket_set_option($master, SOL_SOCKET, SO_REUSEADDR, 1) or die("socket_option() failed");
socket_bind($master, $address, $port) or die("socket_bind() failed");
socket_listen($master,20) or die("socket_listen() failed");
echo "Server Started : ".date('Y-m-d H:i:s')."\n";
echo "Master socket : ".$master."\n";
echo "Listening on : ".$address." port ".$port."\n\n";
return $master;
}
//2. 从WebSocket中读取数据
$buffer = socket_read($socket,2048);
//3. 当收到客户端首次连接请求后,生成握手信息并回复
$return_str = dohandshake($buffer);
socket_write($socket,$return_str,strlen($return_str));
//4. 连接后,即可接收并解析出客户端的数据
$buffer = socket_read($socket,2048);
$data_str = decode($buffer);
//5. 接收到用户数据后,直接回复客户端
socket_write($socket,$return_str,strlen($return_str));
//6. 断开连接
socket_close($socket);
在这里写一下在Tomcat8下执行的例子。例子由客户端页面和WebSocket服务程序组成,功能在Echo基础上增加一个服务端定时发送信息的功能。
ws.html代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test WebSocket</title>
<script type="text/javascript">
//显示信息
var log = function(s) {
if (document.readyState !== "complete") {
log.buffer.push(s);
} else {
document.getElementById("output").textContent += (s + "\n");
document.getElementById("outputdiv").scrollTop = document.getElementById("outputdiv").scrollHeight;
}
}
log.buffer = [];
//显示连接状态
function setConnected(status) {
document.getElementById("socketstatus").innerHTML = status;
}
var ws = null;
//连接
function connect() {
if (ws != null) {
log("现已连接");
return ;
}
url = "ws://localhost:8080/websocket/mywebsocket";
if ('WebSocket' in window) {
ws = new WebSocket(url);
} else if ('MozWebSocket' in window) {
ws = new MozWebSocket(url);
} else {
alert("您的浏览器不支持WebSocket。");
return ;
}
ws.onopen = function() {
log("open");
setConnected("已连接");
//设置发信息送类型为:ArrayBuffer
ws.binaryType = "arraybuffer";
//发送一个字符串和一个二进制信息
ws.send("thank you for accepting this WebSocket request");
var a = new Uint8Array([8, 6, 7, 5, 3, 0, 9]);
ws.send(a.buffer);
}
ws.onmessage = function(e) {
log(e.data.toString());
}
ws.onclose = function(e) {
log("closed");
}
ws.onerror = function(e) {
log("error");
}
}
//断开连接
function disconnect() {
if (ws != null) {
ws.close();
ws = null;
setConnected("已断开");
}
}
window.onload = function() {
connect();
log(log.buffer.join("\n"));
//发送页面上输入框的信息
document.getElementById("sendButton").onclick = function() {
if (ws != null) {
ws.send(document.getElementById("inputMessage").value);
}
}
//停止心跳信息
document.getElementById("stopButton").onclick = function() {
if (ws != null) {
var a = new Uint8Array([1, 9, 2, 0, 1, 5, 1, 6]);
ws.send(a.buffer);
}
}
}
</script>
</head>
<body onunload="disconnect();">
<div>连接状态:<span id="socketstatus"></span></div>
<div>
<input type="text" id="inputMessage" value="Hello, WebSocket!">
<button id="sendButton">发送</button><button id="stopButton" style="margin-left:15px">停止心跳信息</button>
</div>
<div>
<button id="connect" onclick="connect();">连接</button>
<button id="disconnect" onclick="disconnect();">断开</button>
</div>
<div style="height:300px; overflow:auto;" id="outputdiv">
<pre id="output"></pre>
</div>
</body>
</html>
Websocket服务端java程序代码:
package com.test.wsocket;
import java.io.IOException;
import java.nio.ByteBuffer;
import java.util.Random;
import java.util.Timer;
import java.util.TimerTask;
import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.PongMessage;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;
@ServerEndpoint("/mywebsocket")
public class MyWebSocket {
private Session session;
private static final Random random = new Random();
private Timer timer = null;
//停止信息信息指令
private static final ByteBuffer stopbuffer = ByteBuffer.wrap(new byte[]{1, 9, 2, 0, 1, 5, 1, 6});
/**
* 打开连接时执行
* @param session
*/
@OnOpen
public void start(Session session) {
this.session = session;
try {
System.out.println("open");
if (session.isOpen()) {
//设置心跳发送信息。每2秒发送一次信息。
timer = new Timer(true);
timer.schedule(task, 1000, 2000);
}
} catch (Exception e) {
try {
session.close();
} catch (IOException e1) {}
}
}
/**
* 接收信息时执行
* @param session
* @param msg 字符串信息
* @param last
*/
@OnMessage
public void echoTextMessage(Session session, String msg, boolean last) {
try {
if (session.isOpen()) {
System.out.println("string:" + msg);
session.getBasicRemote().sendText(msg, last);
}
} catch (IOException e) {
try {
session.close();
} catch (IOException e1) {
// Ignore
}
}
}
/**
* 接收信息时执行
* @param session
* @param bb 二进制数组
* @param last
*/
@OnMessage
public void echoBinaryMessage(Session session, ByteBuffer bb, boolean last) {
try {
if (session.isOpen()) {
//如果是停止心跳指令,则停止心跳信息
if (bb.compareTo(stopbuffer) == 0) {
if (timer != null) {
timer.cancel();
}
} else {
session.getBasicRemote().sendBinary(bb, last);
}
}
} catch (IOException e) {
try {
session.close();
} catch (IOException e1) {
// Ignore
}
}
}
/**
* 接收pong指令时执行。
*
* @param pm Ignored.
*/
@OnMessage
public void echoPongMessage(PongMessage pm) {
// 无处理
}
@OnClose
public void end(Session session) {
try {
System.out.println("close");
if (timer != null) {
timer.cancel();
}
} catch(Exception e) {
}
}
/*
* 发送心跳信息
*/
public void sendLong(long param) {
try {
if (session.isOpen()) {
this.session.getBasicRemote().sendText(String.valueOf(param));
}
} catch (IOException e) {
try {
this.session.close();
} catch (IOException e1) {}
}
}
/**
* 心跳任务。发送随机数。
*/
TimerTask task = new TimerTask() {
public void run() {
long param = random.nextInt(100);
sendLong(param);
}
};
}
Web.xml代码
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
<display-name>websocket</display-name>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
</welcome-file-list>
<filter>
<filter-name>Set Character Encoding</filter-name>
<filter-class>org.apache.catalina.filters.SetCharacterEncodingFilter</filter-class>
<init-param>
<param-name>encoding</param-name>
<param-value>UTF-8</param-value>
</init-param>
<init-param>
<param-name>ignore</param-name>
<param-value>true</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>Set Character Encoding</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
</web-app>
将以上程序部署到Tomcat8下,启动服务。
完结~~~~~~~~~~
classList是一个DOMTokenList的对象,用于在对元素的添加,删除,以及判断是否存在等操作。以及如何兼容操作
js的原型链,得出了一个看似很简单的结论。对于一个对象上属性的查找是递归的。查找属性会从自身属性(OwnProperty)找起,如果不存在,就查看prototype中的存在不存在。
arguments是什么?在javascript 中有什么样的作用?讲解JavaScript 之arguments的使用总结,包括arguments.callee和arguments.calle属性介绍。
HTML文档在浏览器解析后,会成为一种树形结构,我们需要改变它的结构,就需要通过js来对dom节点进行操作。dom节点(Node)通常对应的是一个标题,文本,或者html属性。
javascript中基本类型指的是那些保存在栈内存中的简单数据段,即这种值完全保存在内存中的一个位置。 引用类型指那些保存在堆内存中的对象,意思是变量中保存的实际上只是一个指针,这个指针指向内存中的另一个位置,该位置保存对象。
apply 、 call 、bind 三者都是用来改变函数的this对象的指向的;第一个参数都是this要指向的对象,也就是想指定的上下文;都可以利用后续参数传参;bind 是返回对应函数,便于稍后调用;apply 、call 则是立即调用 。
在js中有句话叫一切皆对象,而几乎所有对象都具有__proto__属性,可称为隐式原型,除了Object.prototype这个对象的__proto__值为null。Js的prototype属性的解释是:返回对象类型原型的引用。每个对象同样也具有prototype属性,除了Function.prototype.bind方法构成的对象外。
Js支持“=”、“==”和“===”的运算符,我们需要理解这些 运算符的区别 ,并在开发中小心使用。它们分别含义是:= 为对象赋值 ,== 表示两个对象toString值相等,=== 表示两个对象类型相同且值相等
js的变量分为2种类型:局部变量和全局变量。主要区别在于:局部变量是指只能在变量被声明的函数内部调用,全局变量在整个代码运行过程中都可以调用。值得注意的js中还可以隐式声明变量,而隐式声明的变量千万不能当做全局变量来使用。
javascript实现数字三位逗号分隔,如把123456.78转换为123,456.78。js实现支持货币格式表示法:toLocaleString在将数字转换为字符串的同时,会使用三位分节法进行显示。slice 方法用于截取字符串中的一部分并返回该部分字符串。match方式代表正则表达式的匹配....
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!