node.js实现WebSocket
最近在学习“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: <ul id="incomingChatMessages"></ul>
<br />
<input type="text" id="outgoingChatMessage">
</body>
</html>
然后在当前目录cmd下： cnpm install socket.io，会在目录下生成一个文件夹node_modules。
然后用命令：node app.js启动服务器
这时候打开两个浏览器窗口，就可以相互聊天了：
参考：
node.js实现WebSocket的更多相关文章
- 基于node.js 的 websocket的移动端H5直播开发
这一篇介绍一下基于node.js 的 websocket的移动端H5直播开发, 下载文章底部的源码,我是用vscode打开, 首先在第一个终端运行 npm run http-server 这个指令是运 ...
- Windows下Node.js+Express+WebSocket 安装配置
Linux参考: Linux安装Node.js 使用Express搭建Web服务器 Node.js是一个Javascript运行环境(runtime).实际上它是对Google V8引擎进行了封装.V ...
- 基于node.js的websocket上传小功能
一.node.js 在目录里新建index.js var ws = require("nodejs-websocket"); console.log("开始建立连接... ...
- html和node.js实现websocket
websocket websocket是HTML5开始提供的一种单个TCP连接上进行全双工通讯的协议.它让客户端和服务端之间的数据交换变得更加简单,允许服务端主动向客户端推送数据.浏览器和服务器只需要 ...
- 基于node.js的websocket 前后端交互小功能
一.node var ws = require("nodejs-websocket"); console.log("开始建立连接...") var server ...
- 使用Node.js+Socket.IO搭建WebSocket实时应用
Web领域的实时推送技术,也被称作Realtime技术.这种技术要达到的目的是让用户不需要刷新浏览器就可以获得实时更新.它有着广泛的应用场景,比如在线聊天室.在线客服系统.评论系统.WebIM等. W ...
- （转）使用Node.js+Socket.IO搭建WebSocket实时应用
Web领域的实时推送技术,也被称作Realtime技术.这种技术要达到的目的是让用户不需要刷新浏览器就可以获得实时更新.它有着广泛的应用场景,比如在线聊天室.在线客服系统.评论系统.WebIM等. W ...
- 使用Node.js+Socket.IO搭建WebSocket实时应用【转载】
原文:http://www.jianshu.com/p/d9b1273a93fd Web领域的实时推送技术,也被称作Realtime技术.这种技术要达到的目的是让用户不需要刷新浏览器就可以获得实时更新 ...
- 基于Node.js + WebSocket 的简易聊天室
代码地址如下:http://www.demodashi.com/demo/13282.html Node.js聊天室运行说明 Node.js的本质就是运行在服务端的JavaScript.Node.js ...
随机推荐
- Java页面中EL的${}与<%= request.getParameter%>有什么区别？ el 取不到值
${requestScope}操作的是request的作用域,相当于request.getAttribute();不过EL比这个更智能些,它不用强制类型转换就可以拿到了真实对象的值.request.g ...
- springMVC学习二 原始springMVC环境搭建
第一步:导入jar包 第二步:配置DispatcherServlet DispatcherServlet本质是一个Servlet,在spring-webmvc包中,在servlet2.5之前 spr ...
- 【linux轻松学】修改文件权限
用chmod修改文件权限,此命令非常重要. 用户范围:u 表示当前用户g 表示当前群组o 除u,g之外的用户和群组a 所有用户和群组 权限代号:r :读,用数字4表示w :写,用数字2表示x :执行, ...
- kbmmw 中的日期时间操作
为了精确度反映时间及时区,kbmmw 里面专门有一个单元处理日期时间,由于很多同学习惯了delphi 自带的Tdatetime,使用这个时会有一些疑惑,因此今天就单独说一下这个. 首先kbmmwdat ...
- 【转】手动释放linux os buff/cache
手动释放linux内存cache和脚本定时释放 标签: linuxcache脚本bufferwindows磁盘 2011-12-04 08:44 12799人阅读 评论(2) 收藏 举报 分类: l ...
- 2018.12.12 codeforces 931E. Game with String（概率dp）
传送门 感觉这题难点在读懂题. 题目简述:给你一个字符串s,设将其向左平移k个单位之后的字符串为t,现在告诉你t的第一个字符,然后你可以另外得知t的任意一个字符,求用最优策略猜对k的概率. 解析: 预 ...
- 关于微信小程序中组件和页面对全局样式的继承性
1.组件只能继承全局样式中的font和color(backgroundcolor不继承) 2.页面可以继承全局样式中所有样式
- Educational Codeforces Round 62 E 局部dp + 定义状态取消后效性
https://codeforces.com/contest/1140/problem/E 局部dp + 定义状态取消后效性 题意 给你一个某些位置可以改变的字符串,假如字符串存在回文子串,那么这个字 ...
- Win7 VS2013环境编译Squirrel 3.0.7
Squirrel是一个类似Lua,但是更面向对象的脚本语言. 国内这个介绍很少,环境配置更是没有任何文章提到,花了点时间搞定了,备忘记录下过程. 首先是下载,写本文时Squirrel最新版本为3.0. ...
- FontAwesome 4.7.0 中完整的675个图标样式CSS参考
FontAwesome 4.7.0 中完整的675个图标样式CSS参考 用法:首先引入CSS文件:<link href="https://maxcdn.bootstrapcdn.com ...