<!DOCTYPE HTML>

<html>

<head>

<title>My WebSocket</title>

</head>

<body>

Welcome<br/>

<input id="text" type="text" /><button onclick="send()">Send</button>    <button onclick="closeWebSocket()">Close</button>

<div id="message">

</div>

</body>

<script type="text/javascript">

var websocket = null;

//判断当前浏览器是否支持WebSocket

if('WebSocket' in window){

websocket = new WebSocket("ws://localhost:8082/my-websocket");

}

else{

alert('Not support websocket')

}

//连接发生错误的回调方法

websocket.onerror = function(){

setMessageInnerHTML("error");

};

//连接成功建立的回调方法

websocket.onopen = function(event){

setMessageInnerHTML("open");

}

//接收到消息的回调方法

websocket.onmessage = function(event){

setMessageInnerHTML(event.data);

}

//连接关闭的回调方法

websocket.onclose = function(){

setMessageInnerHTML("close");

}

//监听窗口关闭事件,当窗口关闭时,主动去关闭websocket连接,防止连接还没断开就关闭窗口,server端会抛异常。

window.onbeforeunload = function(){

websocket.close();

}

//将消息显示在网页上

function setMessageInnerHTML(innerHTML){

document.getElementById('message').innerHTML += innerHTML + '<br/>';

}

//关闭连接

function closeWebSocket(){

websocket.close();

}

//发送消息

function send(){

var message = document.getElementById('text').value;

websocket.send(message);

}

</script>

</html>

web socket client的更多相关文章

  1. ASP.NET Web API上实现 Web Socket

    1. 什么是Web Socket Web Socket是Html5中引入的通信机制,它为浏览器与后台服务器之间提供了基于TCP的全双工的通信通道.用以替代以往的LongPooling等comet st ...

  2. java版Web Socket,实现消息推送

    # web socket是什么? WebSocket协议是基于TCP的一种新的网络协议. 它实现了浏览器与服务器全双工(full-duplex)通信,允许服务器主动发送信息给客户端. ## 用途 实时 ...

  3. ASP.NET Web API上实现 Web Socket - 转

    1. 什么是Web Socket Web Socket是Html5中引入的通信机制,它为浏览器与后台服务器之间提供了基于TCP的全双工的通信通道.用以替代以往的LongPooling等comet st ...

  4. web socket 入门

    WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议,其优雅地解决了以往web服务器不能向web客户端实时推送消息的问题. 在浏览器js环境中,创建一个websock ...

  5. 基于Spring 4.0 的 Web Socket 聊天室/游戏服务端简单架构

    在现在很多业务场景(比如聊天室),又或者是手机端的一些online游戏,都需要做到实时通信,那怎么来进行双向通信呢,总不见得用曾经很破旧的ajax每隔10秒或者每隔20秒来请求吧,我的天呐(),这尼玛 ...

  6. web socket (记录下来方便观看)

    Web Sockets HTML5 WebSocket 设计出来的目的就是要取代轮询和 Comet 技术,使客户端浏览器具备像 C/S 架构下桌面系统的实时通讯能力. 浏览器通过 JavaScript ...

  7. Node.js + Web Socket 打造即时聊天程序嗨聊

    前端一直是一块充满惊喜的土地,不仅是那些富有创造性的页面,还有那些惊赞的效果及不断推出的新技术.像node.js这样的后端开拓者直接将前端人员的能力扩大到了后端.瞬间就有了一统天下的感觉,来往穿梭于前 ...

  8. python -socket -client

    socket client 发起连接. 流程为: 创建接口 发起连接 创建接口参数同socket server相同 发起连接的函数为socket.connect(ip,port) 这个地方的ip与po ...

  9. HTML5:web socket 和 web worker

    a:hover { cursor: pointer } 做练习遇到了一个选择题,是关于web worker的,问web worker会不会影响页面性能?补习功课之后,答案是不会影响. 查阅了相关资料学 ...

随机推荐

  1. windows下《Go Web编程》之Go环境配置和安装

    <Go Web编程>笔者是基于unix下讲述的,作为入门练手,我选择在windows下开发,全程按照目录进行... 一.安装 windows下需要安装MinGW,通过MinGW安装gcc支 ...

  2. Mysql 编译安装脚本

    cat mysql_init.sh##安装mariadb依赖包function install_yum(){  yum -y install $1}i="ncurses* bison gcc ...

  3. flashfxp 数据socket错误 连接已超时 filezilla

    最近windows server 开启了防火墙后发现flashfxp连不上,报超时. 1,服务端的动态端口从指定的范围内取, 2,防火墙开启范围内端口. 参考:http://jingyan.baidu ...

  4. Problem E: 类的初体验(V)

    Description 定义一个类Data,只有一个int类型的属性和如下方法: 1.   缺省构造函数,将属性初始化为0,并输出"Data's default constructor.&q ...

  5. mysql中describe关键字

    今天写代码的时候,有一个类的数据始终不能插入,老是提示在You have an error in your SQL syntax; check the manual that corresponds ...

  6. ngnix——FastCGI 相关参数调优

    当 LNMP 组合工作时,首先是用户通过浏览器输入域名请求 Nginx Web 服务,如果请求的是静态资源,则由 Nginx 解析返回给用户:如果是动态请求(如 PHP),那么 Nginx 就会把它通 ...

  7. 学习python的字符串的方法

    今天看了下学习视频,发现str也有许多方法,才发现昨天了解的关于字符串知识甚少,所以今天查看了python的源码,学习一些新的方法 以下是我把边对照着源码边翻译,边尝试实现方法 1.第一个字符有大写字 ...

  8. Windows10 VS2017 C++信号处理

    #include "pch.h" #include <iostream> #include <csignal> #include <windows.h ...

  9. tomcat报错-->'Start Tomcat v8.0 Server at localhost' has encountered a problem.

    toncat报错-->'Start Tomcat v8.0 Server at localhost' has encountered a problem. 2016年04月16日 09:27:2 ...

  10. cocos2dx开发之util类&方法——取当前系统时间

    返回time_t,即从1970年1月1日至今的秒数 time_t getSysTime(){ time_t currentTime = time(NULL); return currentTime; ...