HTML5 WebSocket之HelloWorld

最新推荐文章于 2023-04-16 11:53:25 发布

mibb005

最新推荐文章于 2023-04-16 11:53:25 发布

阅读量656

点赞数

分类专栏： HTML 5 文章标签： websocket html5 服务器服务器端javascript function javascript

HTML 5 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

方案

要实现一个WebSocket有很多方案，客户端方面可以用原生的WebSocket对象，也可以使用类似Socket.IO、jQuery Websocket Plugin这样的封装API，服务器端则可以使用Jetty（Java）、Netty（Java）、mod_pywebsocket（Python&Apache）、nodejs（JavaScript）等

这里我挑选了客户端Socket.IO+服务器端Socket.IO-node，这样做一方面客户端和服务器端都使用JavaScript，避免有些童鞋因为不了解Java、Python等其他语言而导致学习成本增加，另一方面两端框架均使用Socket.IO也可以避免客户端和服务器端学习两套不同框架而导致的学习成本

前提条件

* Linux系统一个（或Mac、Solaris、Cgwin、MingW），用于安装nodejs
* 支持HTML5浏览器一个（非IE及其内核浏览器均可，建议Chrome）

安装WebSocket服务器

1. 安装nodejs

node.js是近年来较为流行的服务器端JavaScript框架，基于V8引擎开发，本人曾在早期做过其中文文档项目
访问nodejs主页下载最新版本的nodejs，我用的是0.4.3（安装过程以Linux为例，其他平台可以访问查看安装方法）。然后解压到本地

$ tar xfz node-v0.4.3.tar.gz
$ cd node-v0.4.3
$ ./configure –prefix /home/guolin/tools/node-v0.4.3
$ make
$ make install

如果安装过程出现问题，请确认本地安装有Python 2.4或更高版本，以及libssl-dev包

2. 安装nodejs管理工具NPM

NPM是个nodejs插件管理工具，执行下面的语句就能安装NPM

$ curl http://npmjs.org/install.sh | sh

3. 安装Socket.IO的nodejs插件

Socket.IO是个JavaScript框架，包括服务器端和客户端，使用统一的API封装了各种实时连接（如WebSocket、Flash Socket、AJAX长轮询等），使得后端的连接可以对开发人员透明。安装只需要执行下面的命令即可：

$ npm install socket.io

开始编码

服务器端代码

在服务器上任意目录编辑文件server.js：

var http = require(“http”),
io = require(“socket.io”);

// Create HTTP server
var server = http.createServer(function(request, response) {
response.writeHead({ “Content-Type”: “text/html” });
response.end(“HTML5 WebSocket Demo”);
});
server.listen(8000, “localhost”);

// Wrap HTTP server by socket.io
var socket = io.listen(server);
socket.on(“connection”, function(client) {
console.log(“connected”);

client.on(“message”, function(data) {
client.send(“Hello ” + data);
});

client.on(“disconnect”, function() {
console.log(“disconnected”);
});
});

然后执行：

/home/guolin/tools/node-v0.4.3/bin/node server.js

可以看见服务器开始运行，此时访问 http://localhost:8000 如果看见HTML5 WebSocket Demo字样表示服务器启动成功
注意高亮部分，访问地址必须完全匹配高亮处写入的地址，例如，如果高亮处写的是localhost，且服务器IP地址为192.168.1.2，那么访问localhost将会成功，但访问192.168.1.2将会失败

客户端代码

在客户端编辑client.html文件：

<!DOCTYPE html>
< html>
< head>
< script type=”text/javascript” charset=”utf-8″ src=”http://localhost:8000/socket.io/socket.io.js”></script>
< script type=”text/javascript” charset=”utf-8″>
var socket = new io.Socket(“localhost”, { port: 8000 });
socket.connect();
socket.on(“connect”, function(){
console.log(“connected”);
});
socket.on(“message”, function(data){
console.log(“received message: ” + data);
document.getElementById(“message”).innerHTML = data;
});
socket.on(“disconnect”, function(){
console.log(“disconnected”);
})

function send() {
var name = document.querySelector(“input[name=name]“).value;
console.log(“send message: ” + name);
socket.send(name);
}
< /script>
< /head>
< body>
< label for=”name”>What’s your name:</label>
<input type=”text” id=”name” name=”name” />
<button οnclick=”send()”>Send</button>
< div id=”message” style=”color: red”></div>
< /body>
< /html>

完成后直接用浏览器访问此文件（可以从文件系统访问，不要尝试访问 http://localhost:8000/client.html，那总是会显示HTML5 WebSocket Demo字样，因为nodejs自带的HTTP服务器默认不会读取本地文件）

输入你的名字如guolin，点击Send，服务器端将返回Hello guolin并显示在页面上

整个过程可以通过打开浏览器Console以及观察服务器Console了解到交互过程。同时对于Chrome来说，可以从开发人员工具中的Network 栏中清楚的看到WebSocket与服务器端通信过程（如向ws:/协议发送GET请求，并得到一个101 WebSocket Protocol Handshake的响应等）

后记

到此为止一个简单的WebSocket的应用就搭建完成了，基于这个例子可以很快扩展出一个简易聊天室甚至更为强大的交互应用

mibb005

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5 WebSocket之HelloWorld

方案要实现一个WebSocket有很多方案，客户端方面可以用原生的WebSocket对象，也可以使用类似Socket.IO、jQuery Websocket Plugin这样的封装API，服务器端则可以使用Jetty（Java）、Netty（Java）、mod_pywebsocket（Python&Apache）、nodejs（JavaScript）等这里我挑选了客户端Socket.
复制链接

扫一扫