最近在学习“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. How to Create Triggers in MySQL

    https://www.sitepoint.com/how-to-create-mysql-triggers/ I created two tables: CREATE TABLE `sw_user` ...

  2. 使用 CXF 做 webservice 简单例子(转载)

    使用 CXF 做 webservice 简单例子     Apache CXF 是一个开放源代码框架,提供了用于方便地构建和开发 Web 服务的可靠基础架构.它允许创建高性能和可扩展的服务,您可以将这 ...

  3. QualNet/EXata的发展贯穿在美军网络中心战演进的始终

    QualNet/EXata的发展贯穿在美军网络中心战演进的始终 赵玉亭 1.   QualNet/EXata的前身GloMoSim是美国防部高级计划研究局(DARPA)在1994年启动的全球移动信息系 ...

  4. 失踪的7(P1590&NOIP水题测试(2017082301))

    题目链接:失踪的7 水题,不解释. #include<bits/stdc++.h> using namespace std; int main(){ int t; scanf(" ...

  5. 674. Longest Continuous Increasing Subsequence

    static int wing=[]() { std::ios::sync_with_stdio(false); cin.tie(NULL); ; }(); class Solution { publ ...

  6. 2018.06.26 NOIP模拟 号码(数位dp)

    题目背景 SOURCE:NOIP2015-GDZSJNZX(难) 题目描述 Mike 正在在忙碌地发着各种各样的的短信.旁边的同学 Tom 注意到,Mike 发出短信的接收方手机号码似乎都满足着特别的 ...

  7. GDI基础(2):绘制文本

    1.TextOut()和DrawText()函数 CDC::TextOut()在窗口的指定位置处输出文本,函数声明: virtual BOOL TextOut(int x, int y, LPCTST ...

  8. JavaScript 模拟键盘事件和鼠标事件(比如模拟按下回车等)

    http://blog.csdn.net/lovelyelfpop/article/details/52471878# 封装好的function大概就是这样: function fireKeyEven ...

  9. confluence5.65+CentOS+mysql安装破解

    以atlassian-confluence-5.6.5为例   先安装JAVA环境         通过yum安装jdk,5.6.5不支持jdk1.8,所以安装1.7或者1.6都可以         ...

  10. 剑指offer42:不用加减乘除做加法

    分析: (1)十进制加法分三步:(以5+17=22为例) 1. 只做各位相加不进位,此时相加结果为12(个位数5和7相加不进位是2,十位数0和1相加结果是1): 2. 做进位,5+7中有进位,进位的值 ...