HTML5 WebSockets基础使用教程(5)
作者:暴风彬彬 来源:彬Go 发布时间:2010-09-21 12:48:00
标签:HTML5,WebSockets,教程
第七步:发送数据
现在我们已经有了提交按钮,但我们还需要监听用户按下键盘的事件,并运行send函数,下面的’13′便是回车键对应的ASCII码。
$
('#text').keypress(function(event) {
if (event.keyCode == '13') {
send();
}
});
下面是send()函数:
function send(){
var text = $('#text').val();
if(text==""){
message('<p class="warning">Please enter a message');
return ;
}
try{
socket.send(text);
message('<p class="event">Sent: '+text)
} catch(exception){
message('<p class="warning"> Error:' + exception);
}
$('#text').val("");
}
下面我们需要:
socket.send();
那些额外的代码做了以下工作:检测用户是否什么都没输入却仍点击返回、清空input输入框、执行message()函数。
第八步:关闭Socket
关闭Socket操作相当简单,添加对断开连接按钮的click事件监听就可以。
$('#disconnect').click(function(){
socket.close();
});
完整JavaScript代码
$(document).ready(function() {
if(!("WebSocket" in window)){
$('#chatLog, input, button, #examples').fadeOut("fast");
$('<p>Oh no, you need a browser that supports WebSockets. How about <a href="Google'>http://www.google.com/chrome">Google Chrome</a>?</p>').appendTo('#container');
}else{
//The user has WebSockets
connect();
function connect(){
var socket;
var host = "ws://localhost:8000/socket/server/startDaemon.php";
try{
var socket = new WebSocket(host);
message('<p class="event">Socket Status: '+socket.readyState);
socket.onopen = function(){
message('<p class="event">Socket Status: '+socket.readyState+' (open)');
}
socket.onmessage = function(msg){
message('<p class="message">Received: '+msg.data);
}
socket.onclose = function(){
message('<p class="event">Socket Status: '+socket.readyState+' (Closed)');
}
} catch(exception){
message('<p>Error'+exception);
}
function send(){
var text = $('#text').val();
if(text==""){
message('<p class="warning">Please enter a message');
return ;
}
try{
socket.send(text);
message('<p class="event">Sent: '+text)
} catch(exception){
message('<p class="warning">');
}
$('#text').val("");
}
function message(msg){
$('#chatLog').append(msg+'</p>');
}
$('#text').keypress(function(event) {
if (event.keyCode == '13') {
send();
}
});
$('#disconnect').click(function(){
socket.close();
});
}//End connect
}//End else
});


猜你喜欢
- Python借助AI和数据科学,目前已经攀爬到了编程语言生态链的顶级位置,可以说Python基本上与AI已经紧密捆绑在了一起了。为什么人工智
- 在计算机中数据有两种特征:类型和长度。所谓数据类型就是以数据的表现方式和存储方式来划分的数据的种类。在SQL Server 中每个变量、参数
- 1、pip下载安装1.1 pip下载进入https://pypi.python.org/pypi/pip,下载 .tar.gz压缩包1.2&
- 本文向大家介绍一个javascript实现的动画。点击开始按钮div会往右移动,点击停止后,div停止移动,再点击则继续移动。请看下面代码:
- 作者的blog: blog.never-online.net"Never Modules"-NCC(never
- 为项目设置虚拟环境Python的虚拟环境可以类似于Java中Tomcat容器。其主要作用是为了给不同的工程创建相互独立的运行环境,在虚拟环境
- 1. 引言Python中有一些内置函数,可以使我们的代码非常优雅。zip 函数就是其中之一,但是zip 函数的使用对于初学者来说不是很直观,
- 本文实例为大家分享了python实现反向迭代的具体代码,供大家参考,具体内容如下案例: &nb
- 在我写的blog中,这个算是参与度比较高的,所以有必要把程序写的更加容易理解一些。我的电脑配置:? bechmark  
- mysql中You can't specify target table for update in FROM clause错误的意
- 如下所示:# -*-coding:utf-8 -*-def do_telnet(Host, username, password, fini
- 环境:Oracle 11.2.0.4 RAC(2 nodes)说明:假设新增闪存挂载点是/flash(使用了第三方的集群文件系统),如果是使
- 在Firefox推出3.5后,他增加了许多新的支持,今天抽空将他们整理一下。属性image-renderingtext-renderingi
- 建立池连接可以显著提高应用程序的性能和可缩放性。SQL Server .NET Framework 数据提供程序自动为 ADO.NET 客户
- 1.用管理员打开cmd2.首先通过pip命令安装wheelpip install wheel如果提示'pip'不是内部或外部
- 最近在制作一个自己的个人博客的时候遇到这么一个问题, 在CSS中使用了相对路径来充当背景图片, 如下所示:然后将整个工程使用webpack打
- 最近开始实习,工作技术栈主要Python和Golang,目前的任务把Python模块重构为GO模块,然后出现了一个问题,就是要将一个结构体按
- 目录准备读取数据写入数据修改数据进阶用法最后准备首先,我们需要安装依赖包# 安装依赖包pip3 install 
- gob是Golang包自带的一个数据结构序列化的编码/解码工具。编码使用Encoder,解码使用Decoder。一种典型的应用场景就是RPC
- 1、要点击链接,然后点击里面的上传tab,不熟悉的人可能找不到这个上传功能 2、插入的就是1个链接,我希望插入链接的同时插入1个图片代表文件