<!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. NOIP竞赛须知

    初赛报名 1.凡初.高中阶段的选手和同等年龄段中等专业学校的在校生均可以报名参加NOIP赛事. 2.选手以学籍学校为单位在指导教师处报名,由指导教师汇总本校学校报名情况并提交给NOI省特派员,由省特派 ...

  2. ORA-12638: 身份证明检索失败的解决方法

    本地oracle客户端用PLSQL Developer连接远程数据库,每次登录都会在很久之后,出现 ORA-12638: 身份证明检索失败,tnsping 表明TNS配置没有问题. 解决方案: D:\ ...

  3. spoj periodni

    题解: dp 方程弄出来就好做了 代码: #include<bits/stdc++.h> ,M=; typedef int arr[N]; typedef long long ll; in ...

  4. Hibernate----面试题

    什么是Hibernate? hibernate是一个基于ORM持久框架,可以让程序员以面向对象的思想操作数据库,提高生产效率. 什么是ORM? orm不过是一种思想,对象关系映射.是对象关系模型,如h ...

  5. 从零开始学Shell(二）

    $1,$2....${10},${11},[root@localhost cee]# cat p.sh #!/bin/bash#file_name:p.shecho $1 $2[root@localh ...

  6. python笔记13-文件读写

    1.打开文件 f=open('a.txt','a+',encoding='utf-8')#f代表的是文件对象,叫句柄 f.seek(0)把文件指针到最前 文件打开模式有3种: 1:w写模式,它是不能读 ...

  7. vs开发/IIS 遇到的问题--------笔记

    1.VS2017专业版和企业版激活密钥 Enterprise: NJVYC-BMHX2-G77MM-4XJMR-6Q8QF Professional: KBJFW-NXHK6-W4WJM-CRMQB- ...

  8. LAMP架构上（一）

    第十七课LAMP架构上(一) 目录 一.LAMP架构介绍 二.MySQL.MariaDB介绍 三.MySQL安装 四.MariaDB安装 五.Apache安装 六.安装PHP5 七.安装PHP7 八. ...

  9. bat中errorlevel与%errorlevel%的区别

    bat中errorlevel与%errorlevel%的区别? 他们都是判断上个命令的返回值.当使用if errorlevel 值 cmmand 句式时,它的含义是:如果返回的错误码值大于或等于值 的 ...

  10. day 06 字符串和列表的方法

    一.整形int 定义方式: age=18    #调用age=int(18)的方法,自动调用 n=int("123") #只能转换纯数字类型 二:浮点型float 定义方式 sal ...