WebSocket实战之JavaScript例子
一、详细代码案例
详细解读一个简单html5 WebSocket的Js实例教程,附带完整的javascript websocket实例源码,以及实例代码效果演示页面,并对本实例的核心代码进行了深入解读。
从WebSocket通讯三个阶段(打开握手、数据传递、关闭握手)进行了探讨,各阶段中浏览器和服务器做了些什么事情也有所涉及。
//检查浏览器是否支持WebSocket
if(window.WebSocket){
console.log('This browser supports WebSocket');
}else{
console.log('This browser does not supports WebSocket');
}
Html演示代码
<!DOCTYPE html>
<meta charset="utf-8" />
<title>WebSocket Test</title>
<script language="javascript"type="text/javascript">
var wsUri ="ws://echo.websocket.org/";
var output; function init() {
output = document.getElementById("output");
testWebSocket();
} function testWebSocket() {
websocket = new WebSocket(wsUri);
websocket.onopen = function(evt) {
onOpen(evt)
};
websocket.onclose = function(evt) {
onClose(evt)
};
websocket.onmessage = function(evt) {
onMessage(evt)
};
websocket.onerror = function(evt) {
onError(evt)
};
} function onOpen(evt) {
writeToScreen("CONNECTED");
doSend("WebSocket rocks");
} function onClose(evt) {
writeToScreen("DISCONNECTED");
} function onMessage(evt) {
writeToScreen('<span style="color: blue;">RESPONSE: '+ evt.data+'</span>');
websocket.close();
} function onError(evt) {
writeToScreen('<span style="color: red;">ERROR:</span> '+ evt.data);
} function doSend(message) {
writeToScreen("SENT: " + message);
websocket.send(message);
} function writeToScreen(message) {
var pre = document.createElement("p");
pre.style.wordWrap = "break-word";
pre.innerHTML = message;
output.appendChild(pre);
} window.addEventListener("load", init, false);
</script>
<h2>WebSocket Test</h2>
<div id="output"></div>
</html>
二、主要代码解读:
1、申请一个WebSocket对象
参数是需要连接的服务器端的地址,同http协议使用http://开头一样,WebSocket协议的URL使用ws://开头,另外安全的WebSocket协议使用wss://开头。
var wsUri ="ws://echo.websocket.org/";
websocket = new WebSocket(wsUri);
2、WebSocket对象一共支持四个消息 onopen, onmessage, onclose和onerror
我们可以看出所有的操作都是采用消息的方式触发的,这样就不会阻塞UI,使得UI有更快的响应时间,得到更好的用户体验。
(1)当Browser和WebSocketServer连接成功后,会触发onopen消息;
websocket.onopen = function(evt) {};
(2)如果连接失败,发送、接收数据失败或者处理数据出现错误,browser会触发onerror消息;
websocket.onerror = function(evt) { };
(3)当Browser接收到WebSocketServer发送过来的数据时,就会触发onmessage消息,参数evt中包含server传输过来的数据;
websocket.onmessage = function(evt) { };
(4)当Browser接收到WebSocketServer端发送的关闭连接请求时,就会触发onclose消息。
websocket.onclose = function(evt) { };
本文参考地址:https://www.cnblogs.com/tinywan/p/5894403.html
WebSocket实战之JavaScript例子的更多相关文章
- WebSocket实战之——JavaScript例子
一.详细代码案例 详细解读一个简单html5 WebSocket的Js实例教程,附带完整的javascript websocket实例源码,以及实例代码效果演示页面,并对本实例的核心代码进行了深入解读 ...
- WebSocket 实战(转)
WebSocket 实战 本文介绍了 HTML5 WebSocket 的由来,运作机制及客户端和服务端的 API 实现,重点介绍服务端(基于 Tomcat7)及客户端(基于浏览器原生 HTML5 AP ...
- WebSocket 实战
http://www.ibm.com/developerworks/cn/java/j-lo-WebSocket/ 本文介绍了 HTML5 WebSocket 的由来,运作机制及客户端和服务端的 AP ...
- linuxC编程实战 my_server.c例子问题总结
今天看linux C 编程实战的my_server例子时,敲到这段代码,对其父子进程关闭socket 进行close调用产生疑问 如图中标注的三个close socket,思考子进程通信结束 关闭自己 ...
- WebSocket 实战--转
原文地址:http://www.ibm.com/developerworks/cn/java/j-lo-WebSocket/ WebSocket 前世今生 众所周知,Web 应用的交互过程通常是客户端 ...
- C# WebApi+Task+WebSocket实战项目演练(四)
一.课程介绍 本次分享课程属于<C#高级编程实战技能开发宝典课程系列>中的第四部分,阿笨后续会计划将实际项目中的一些比较实用的关于C#高级编程的技巧分享出来给大家进行学习,不断的收集.整理 ...
- 用socket.io实现websocket的一个简单例子
socket.io 是基于 webSocket 构建的跨浏览器的实时应用. 逛博客发现几个比较好的 一.用socket.io实现websocket的一个简单例子 http://biyeah.iteye ...
- WebSocket实战之————GatewayWorker使用笔记例子
参考文档:http://www.workerman.net/gatewaydoc/ 目录结构 ├── Applications // 这里是所有开发者应用项目 │ └── YourApp // 其中一 ...
- 在线聊天室的实现(1)--websocket协议和javascript版的api
前言: 大家刚学socket编程的时候, 往往以聊天室作为学习DEMO, 实现简单且上手容易. 该Demo被不同语言实现和演绎, 网上相关资料亦不胜枚举. 以至于很多技术书籍在讲解网络相关的编程时, ...
随机推荐
- 随机森林和adaboost算法(待更新)
Adaboost是一种迭代算法,其核心思想是针对同一个训练集训练不同的分类器(弱分类器),然后把这些弱分类器集合起来,构成一个更强的最终分类器(强分类器).
- angular指令详解--自定义指令
自定义指令 directive()这个方法是用来定义指令的: angular.module('myApp', []) .directive('myDirective', function ($time ...
- Prism开发人员指南5-WPF开发 文档翻译(纯汉语版)
2014四月 Prism以示例和文档的形式帮助你更简单的设计丰富灵活易维护的WPF程序.其中使用的设计模式体现了一些重要的设计原则,例如分离关注点和松耦合,Prism帮助你利用松耦合组件设 ...
- Elasticsearch 文档专用
ES安装等操作 http://blog.csdn.net/cnweike/article/details/33736429 https://www.elastic.co/guide/cn/elasti ...
- LeetCode OJ:Next Permutation(下一排列)
Implement next permutation, which rearranges numbers into the lexicographically next greater permuta ...
- LeetCode OJ:Combination Sum (组合之和)
Given a set of candidate numbers (C) and a target number (T), find all unique combinations in C wher ...
- react antd layout sider
import React from 'react'; import {Link, withRouter} from 'react-router-dom'; import {Layout, Menu, ...
- vbs 字符串替换
http://blog.csdn.net/flm2003/article/details/7212448 function返回值 http://www.cnblogs.com/wakey/p/5758 ...
- lua基础---函数
Lua的函数功能很强大,保留了C语言的一些基本的特性,但是也有C语言没有的特性,比如,lua可以在一个函数返回多个值,我们来看看下面这个案例: 解释运行: lua test5.lua --定义一个函数 ...
- 2 秒杀系统模拟基础实现,使用Redis实现
这一篇,我们来使用redis进行数据存储. 新建一个redis的service实现类 package com.tianyalei.service; import com.tianyalei.model ...