原文http://fallenlord.blogbus.com/logs/110768932.html

方案

要实现一个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引擎开发，本人曾在早期做过其中文文档项目 https://github.com/fallenlord/node_doc_zh_CN
访问nodejs主页下载最新版本的nodejs，我用的是0.4.3（安装过程以Linux为例，其他平台可以访问https://github.com/joyent/node/wiki/Installation查看安装方法）。然后解压到本地

$ 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的响应等）

HTML5 WebSocket之HelloWorld相关推荐

  1. 打通B/S与C/S ！让HTML5 WebSocket与.NET Socket公用同一个服务端！

    随着HTML5 WebSocket技术的日益成熟与普及,我们能够借助WebSocket来更加方便地打通BS与CS -- 由于B/S中的WebSocket能够直接连接到C/S的服务端,并进行双向通信.例 ...

  2. h5 socket.io java,从HTML5 WebSocket到Socket.io

    HTML5 WebSocket 作为新一代的web标准,HTML5为我们提供了很多有用的东西,比如canvas,本地存储(已经分离出去了),多媒体编程接口,当然还有我们的WebSocket.WebSo ...

  3. html5 websocket 手机,HTML5 WebSocket 示范

    HTML5 WebSocket 示例 我们通过一个简单的例子来熟悉 HTML5 WebSocket.该例子服务端从 0 开始每秒递增一个整数并发送给客户端浏览器显示.准备:Jetty 7 ,Java ...

  4. html5 websocket与c,打通B/S与C/S ！让HTML5 WebSocket与.NET Socket公用同一个服务端！

    随着HTML5 WebSocket技术的日益成熟与普及,我们可以借助WebSocket来更加方便地打通BS与CS -- 因为B/S中的WebSocket可以直接连接到C/S的服务端,并进行双向通信.如 ...

  5. 【Html5 WebSocket】WebSocket事件

    <HTML5 WebSocket权威指南>学习笔记&2 上一篇:[Html5 WebSocket]WebSocket构造函数 WebSocket事件 WebSocket编程遵循异步 ...

  6. HTML5 WebSocket的入门使用

    HTML5 WebSocket:长连接,客户端与服务端可以保持长时间的通信. 一.具体步骤: 1.创建一个websocket实例,连接远程服务器并且需要一个连接服务器的url let baseUrl ...

  7. HTML5 - Websocket

    关键词: HTML5 网络通讯协议 并肩HTTP 基于TCP 客户端与服务器 全双工通讯 双向数据传输 实现长链接.持久性链接 HTTP是非持久性 总结: Websocket是一种在单个TCP连接上进 ...

  8. Html5 WebSocket 技术介绍(转载)

    WebSocket是html5规范新引入的功能,用于解决浏览器与后台服务器双向通讯的问题,使用WebSocket技术,后台可以随时向前端推送消息,以保证前后台状态统一,在传统的无状态HTTP协议中,这 ...

  9. html5 网络断开,html5 – websocket不断断开连接

    我一直在努力建立一个在浏览器中运行的websocket聊天室.我已经做了一些谷歌搜索,并找到了一个提供示例websocket连接的网站(www.websocket.org/echo.html).但每当 ...

最新文章

  1. JAE京东云引擎Git上传管理代码教程和京东云数据库导入导出管理
  2. 用贝叶斯定理解决三门问题并用Python进行模拟（Bayes' Rule Monty Hall Problem Simulation Python）...
  3. 从2017年顶会论文看Attention Model - PaperWeekly 第50期
  4. python常见的文件操作：打开、创建等
  5. switch语句可以被代替吗_大空间建筑内的消防水炮可以代替喷淋装置吗
  6. express 路由中间件_Express通过示例进行解释-安装，路由，中间件等
  7. 泰安第一中学2021年高考成绩查询,等级考第一天结束 泰安部分考生已完成2021年高考...
  8. python类型和格式_json数据格式和python中字典的数据类型
  9. 可视化数据包分析工具-CapAnalysis
  10. 图论 —— 网络流 —— 最小割 —— 平面图与对偶图
  11. MySQL—FTS实现原理介绍PPT
  12. ngx_http_upstream_module模块学习笔记
  13. 卡尔曼滤波器工作原理
  14. 广外男生病毒代码剖析
  15. Java|如何用Java定义一个类
  16. 商业智能BI的价值，可视化报表等于商业智能BI吗？
  17. HTML+CSS仿写京东页面附代码（web前端大作业）
  18. 项目上线后，接口报错：SELECT command denied to user ‘用户名’ @ localhost‘ for table ‘ ‘
  19. 智商情商哪个重要_情商和智商 哪个对孩子更重要？
  20. 佳都科技要讲一个“AI+交通”的故事，资本市场愿意买单么？

热门文章

  1. pythonshellnohup_python nohup 实现远程运行不宕机操作
  2. Replication Controller、Replica Set
  3. 如何在 CentOS 7 上安装 Nginx
  4. PM2管理node.js
  5. Intellij Idea 导入多个maven项目展示在左侧栏Maven Projects
  6. 理解Docker（5）：Docker 网络
  7. netty 对 protobuf 协议的解码与包装探究(2)
  8. UOJ 52 元旦激光炮
  9. IOS TableView实现省市联动
  10. JSP获得客服端MAC地址