Tags: html5

零基础开始WebSocket(3)—-简单的聊天室程序

客户端: <!DOCTYPE html> <html> <head> <title></title> <style> #win{ border:1px solid #ccc; padding:20px ; color:#333; line-height:2em; } .input{ padding:10px 0px; text-align:left;} .input input{ width:200px;} </style> </head> <body> <div id=”win”></div> <div><input id=”text”><button id=”send”>发送</button><button id=”disconnect”>断开连接</button></div> <script> function log(d){ var logDiv=document.createElement(“div”); logDiv.innerHTML=d; document.getElementById(“win”).appendChild(logDiv); } //创建websocket连接 var socket=new WebSocket(“ws://localhost:12345/websocket/server.php”); //绑定连接成功事件 socket.onopen=function(){ log(“Socket ReadyState:”+socket.readyState); //socket.send(“hi”); }; //绑定接收到信息事件 socket.onmessage=function(e){ log(e.data); } //绑定关闭连接事件 ...Read More

零基础开始WebSocket(2)—-测试服务器

支持HTML5的websocket的浏览器很多。 包括 Opera,Firefox4,Chrome,Safari. 其中Firefox4和Opera的WebSocket默认没有开启,需要手动配置。在浏览器地址栏中输入about:config ,然后找到websocket这一项,把它启用。 我使用了Chrome来测试。 首先,新建一个HTML,加入几个div,来显示数据。 <!DOCTYPE html> <html> <head> <title></title> <style> #win{ border:1px solid #ccc; padding:20px ; color:#333; line-height:2em; } .input{ padding:10px 0px; text-align:left;} .input input{ width:200px;} </style> </head> <body> <div id=”win”></div> <div><input id=”text”><button id=”send”>发送</button><button id=”disconnect”>断开连接</button></div> </body> </html> <!DOCTYPE html>是HTML5的DTD,不谈了。 两个DIV,win用来显示数据,input用来存放提示框 下面写入脚本来测试socket服务器 首先是一个输出的函数 log <script> function log(d){ var logDiv=document.createElement(“div”); logDiv.innerHTML=d; document.getElementById(“win”).appendChild(logDiv); } </script> ...Read More

零基础开始WebSocket(1)—-简单的socket服务器端

零基础。开始搞websocket websocket实现了即时通信,远比现在常用的长连接经济方便。 我用的socket服务器端是PHP的。 下载链接 http://www.frontendcodes.com/downloads/socket.rar 解压至本地服务器文件夹。 在server.php中 有$master  = WebSocket(“localhost”,12345);这一行,localhost是地址,12345是端口号,可以自行修改。 修改完在命令行中键入php -q 路径/server.php,例如,我的在E:\svn\sockets\ 执行命令 E:\php\php.exe -q E:\svn\sockets\server.php OK,一个简单的socket服务器搞定。