最近在学习“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. 多种方式判断PC端，IOS端，移动端

    1. 通过判断浏览器的userAgent,用正则来判断手机是否是IOS(苹果)和Android(安卓)客户端. var u = navigator.userAgent; var isAndroid = ...

  2. sqlserver中如何将mdf文件还原到数据库

  3. pt-query-digest详解慢查询日志

    一.简介 pt-query-digest是用于分析mysql慢查询的一个工具,它可以分析binlog.General log.slowlog,也可以通过SHOWPROCESSLIST或者通过tcpdu ...

  4. 2019.01.19 bzoj5457: 城市（线段树合并）

    传送门 线段树合并菜题. 题意简述:给一棵树,每个节点有bib_ibi​个aia_iai​民族的人,问对于每棵子树,子树中哪个民族的人最多,有多少人. 思路: 直接上线段树合并,边合并边维护答案即可. ...

  5. 高效能程序员的七个习惯【csdn】

    从网上看到的,感觉挺不错的! Beautiful is better than ugly. Explicit is better than implicit. Simple is better tha ...

  6. mysql 配置MHA

    在配置好GTID复制后,配置MHA的高可用. 1.准备3台机器 192.168.31.100 主库 192.168.31.101 从库 192.168.31.104 从库 MHA控制节点 2.设置SS ...

  7. CString int转换

    1.CString 转 int      CString strtemp = "100";    int  intResult;    intResult= atoi(strtem ...

  8. IntelliJ IDEA 2017版 spring-boot搭建拦截器

    1.建立一个springboot-web项目 https://www.cnblogs.com/liuyangfirst/p/8298588.html 2.加入过滤接口 public class Log ...

  9. 第四章,java面向对象特性

    4.1 特性 封装,继承, 多态(编译时:方法的重载,同一个类里面不同方法可以用同一个方法名只是传入参数不同, 运行时多态:基础类提供一个接口,在编译时只调用基础类的接口,在运行时才确定到底是哪一个子 ...

  10. Zookeeper C++编程实战之配置更新

    CZookeeperHelper:https://github.com/eyjian/libmooon/blob/master/include/mooon/net/zookeeper_helper.h ...