最近在学习“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. 更精确的判断对象类型js方法

    function isArray(o) { return Object.prototype.toString.call(o) === '[object Array]'; } function isRe ...

  2. 【51NOD】1006 最长公共子序列Lcs(动态规划)

    给出两个字符串A B,求A与B的最长公共子序列(子序列不要求是连续的). 比如两个串为:   abcicba abdkscab   ab是两个串的子序列,abc也是,abca也是,其中abca是这两个 ...

  3. 28、shareSDK分享以及 QQ应用平台申请遇到的问题

    第一点:菜单列表没出来 未添加白名单 第二点: QQ平台申请,和安卓共用一个APP名字,出现的 问题 第三点

  4. ios 基础知识篇 堆和栈的区别

    前言 堆和栈是什么?有什么区别?是干嘛的? 内存管理 移动设备的内存及其有限,每一个APP所能占用的内存是有限制的 (吐槽一下:iPhone6s还是16G起步,还好我也买不起->_-> 扯 ...

  5. CodeForces 916C Jamie and Interesting Graph (构造)

    题意:给定两个数,表示一个图的点数和边数,让你构造出一个图满足 1-  n 的最短路是素数,并且最小生成树也是素数. 析:首先 1 - n 的最短路,非常好解决,直接 1 连 n 就好了,但是素数尽量 ...

  6. readystatechange事件

    IE为DOM文档中的某些部分readystatechange事件. 这个事件的目的是提供与文档或元素的加载状态有关的信息,但是这个事件的行为有时候也很难预测. 支持readystatechange事件 ...

  7. Redis集群的主从切换研究

    目录 目录 1 1. 前言 1 2. slave发起选举 2 3. master响应选举 5 4. 选举示例 5 5. 哈希槽传播方式 6 6. 一次主从切换记录1 6 6.1. 相关参数 6 6.2 ...

  8. redis for lack of backlog

    版本: redis-3.2.9 部署: 5台64G内存的物理机,每台机器启动2个redis进程组成5主5备集群,每台机器1个主1个备,并且错开互备. 问题: 发现redis进程占用内存高达40G,而且 ...

  9. Python 错误和异常小结[转]

    原文链接    http://blog.csdn.net/sinchb/article/details/8392827 事先说明哦,这不是一篇关于Python异常的全面介绍的文章,这只是在学习Pyth ...

  10. C#-VS异常处理

    VS异常处理 常规 try     可能会产生异常的代码,当一行产生异常,这行下面的代码不执行,转到catch开始执行 catch(system.Exception e)      e.message ...