最近在学习“HTML5游戏开发实战”，其中第8章内容是使用WebSocket来构建多人游戏---《你画我猜》。然而在实现过程中，却一直出错：

客户端请求时，服务器端会报错并终止：

而浏览器端也会出错：

服务器代码：

var ws = require(__dirname + '\\lib\\ws\\server');

var server = ws.createServer();

server.addListener("connection",function(conn){

    //处理连接接入

    console.log("A connection established with id",conn.id);

    var message = "Welcome " + conn.id + " joining the party.Total connection:" + server.manager.length;

    console.log(message);

    server.broadcast(message);

});

server.listen(8000);

console.log("WebSocket server is running.");

console.log("Listening to port 8000.");

客户端代码：

var websocketGame = {}

$(function(){

    if(window['WebSocket']){

        //创建连接

        websocketGame.socket = new WebSocket("ws://localhost:8000");

        //处理open事件

        websocketGame.socket.onopen = function(e){

            console.log('WebSocket connection established.');

        };

        //处理message事件

        websocketGame.socket.onmessage = function(e){

            console.log(e.data);

        };

        //处理close事件

        websocketGame.socket.onclose = function(e){

            console.log('WebSocket connection closed.');

        };

    }

});

各种调bug都无效。然后发现原因是chrome端的不兼容：

node-websocket-server，不支持websocket的draft-10，而chrome 14+浏览器，只支持draft-10的websocket，这样chrome基本都不能用了

因为按书上的教程使用的是node-websocket-server的lib。所以这里按照这篇教程改成了WebSocket-Node

这个工具需要按照两个环境MVC++和Python2.7 于是选择使用socket.io

新建两个文件app.js和index.html

app.js

var fs = require('fs')

    , http = require('http')

    , socketio = require('socket.io');

var server = http.createServer(function(req, res) {

    res.writeHead(200, { 'Content-type': 'text/html'});

    res.end(fs.readFileSync(__dirname + '/index.html'));

}).listen(8000, function() {

    console.log('Listening at: http://localhost:8000');

});

socketio.listen(server).on('connection', function (socket) {

    socket.on('message', function (msg) {

        console.log('Message Received: ', msg);

        socket.broadcast.emit('message', msg);

    });

});

index.html:

<html>

<head>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

    <script src="/socket.io/socket.io.js"></script>

    <script>

        $(function(){

            var iosocket = io.connect();

            iosocket.on('connect', function () {

                $('#incomingChatMessages').append($('<li>Connected</li>'));

                iosocket.on('message', function(message) {

                    $('#incomingChatMessages').append($('<li></li>').text(message));

                });

                iosocket.on('disconnect', function() {

                    $('#incomingChatMessages').append('<li>Disconnected</li>');

                });

            });

            $('#outgoingChatMessage').keypress(function(event) {

                if(event.which == 13) {

                    event.preventDefault();

                    iosocket.send($('#outgoingChatMessage').val());

                    $('#incomingChatMessages').append($('<li></li>').text($('#outgoingChatMessage').val()));

                    $('#outgoingChatMessage').val('');

                }

            });

        });

    </script>

</head>

<body>

Incoming Chat:&nbsp;<ul id="incomingChatMessages"></ul>

<br />

<input type="text" id="outgoingChatMessage">

</body>

</html>

然后在当前目录cmd下： cnpm install socket.io，会在目录下生成一个文件夹node_modules。

然后用命令：node app.js启动服务器

这时候打开两个浏览器窗口，就可以相互聊天了：

参考：

Nodejs实现websocket的4种方式

Socket.IO 和 Node.js 入门

node.js实现WebSocket的更多相关文章

  1. 基于node.js 的 websocket的移动端H5直播开发

    这一篇介绍一下基于node.js 的 websocket的移动端H5直播开发, 下载文章底部的源码,我是用vscode打开, 首先在第一个终端运行 npm run http-server 这个指令是运 ...

  2. Windows下Node.js+Express+WebSocket 安装配置

    Linux参考: Linux安装Node.js 使用Express搭建Web服务器 Node.js是一个Javascript运行环境(runtime).实际上它是对Google V8引擎进行了封装.V ...

  3. 基于node.js的websocket上传小功能

    一.node.js 在目录里新建index.js var ws = require("nodejs-websocket"); console.log("开始建立连接... ...

  4. html和node.js实现websocket

    websocket websocket是HTML5开始提供的一种单个TCP连接上进行全双工通讯的协议.它让客户端和服务端之间的数据交换变得更加简单,允许服务端主动向客户端推送数据.浏览器和服务器只需要 ...

  5. 基于node.js的websocket 前后端交互小功能

    一.node var ws = require("nodejs-websocket"); console.log("开始建立连接...") var server ...

  6. 使用Node.js+Socket.IO搭建WebSocket实时应用

    Web领域的实时推送技术,也被称作Realtime技术.这种技术要达到的目的是让用户不需要刷新浏览器就可以获得实时更新.它有着广泛的应用场景,比如在线聊天室.在线客服系统.评论系统.WebIM等. W ...

  7. （转）使用Node.js+Socket.IO搭建WebSocket实时应用

    Web领域的实时推送技术,也被称作Realtime技术.这种技术要达到的目的是让用户不需要刷新浏览器就可以获得实时更新.它有着广泛的应用场景,比如在线聊天室.在线客服系统.评论系统.WebIM等. W ...

  8. 使用Node.js+Socket.IO搭建WebSocket实时应用【转载】

    原文:http://www.jianshu.com/p/d9b1273a93fd Web领域的实时推送技术,也被称作Realtime技术.这种技术要达到的目的是让用户不需要刷新浏览器就可以获得实时更新 ...

  9. 基于Node.js + WebSocket 的简易聊天室

    代码地址如下:http://www.demodashi.com/demo/13282.html Node.js聊天室运行说明 Node.js的本质就是运行在服务端的JavaScript.Node.js ...

随机推荐

  1. barcode(index)

    在很多情况下,我们需要把多个样本混合在一起,在同一个通道(lane)里完成测序.像转录组测序.miRNA测序.lncRNA测序.ChIP测序等等,通常每个样本所需要的数据量都比较少,远少于HiSeq一 ...

  2. Tgrocery学习及使用

    能够学习到短文本分类模型——Tgrocery,十分感谢@GavinBuildSomething把源码及测试数据分享,在此我也作为一名学习者将自己的学习过程记录下来,希望对其他人有所帮助.   1.学习 ...

  3. 使用yarn 安装 Vue-DevTools

    1. 从 github 下载 vuejs/vue-devtools https://github.com/vuejs/vue-devtools/archive/dev.zip 2.安装yarn 及 编 ...

  4. 【算法专题】工欲善其事必先利其器—— 常用函数和STL

    一.    常用函数 #include <stdio.h> int getchar( void );               //读取一个字符, 一般用来去掉无用字符 char *ge ...

  5. mysql查看某个表的列名

    mysql查看某个表的列名mysql -uusername -p 输入密码按登录mysqlshow databases; 查看有哪些数据库use dbname; 选择数据库show tables:查看 ...

  6. CSS-尺寸与边框

    1.基础选择器的优先级 权值:标识当前选择器的重要程度,权值越大优先级越高. 元素选择器 1 类选择器 10 伪类选择器 10 ID选择器 100 内联样式 1000 选择器的权值加到一起,大的优先 ...

  7. UDDI

    什么是 UDDI? UDDI 是一个独立于平台的框架,用于通过使用 Internet 来描述服务,发现企业,并对企业服务进行集成. UDDI 指的是通用描述.发现与集成服务 UDDI 是一种用于存储有 ...

  8. windows下 python2 和python3 共存

    目前我们在国内网站上看到的两者共存的方法就是将其中一个的python.exe重命名.虽说在一定程度上可行,但存在一个重大的隐患,就是修改了名字的那个python对应的pip将无法使用. 下面说一下具体 ...

  9. DOM3级的变化

    由于存在跨浏览器开发问题所以不推荐使用: 兼容性: event.key 包含所按下键的字符 event.char 属性IE9和safari和chrome并不支持 event.location 返回所按 ...

  10. powerdesiginer 生成oracle脚本问题，一步解决

    select * from tablename时, 总是提示错误:table or view does not exits 但是在user_tables中却可以看到刚建立的表. 原因是powerDes ...