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:&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 入门

时间: 2024-10-10 00:33:33

node.js实现WebSocket的相关文章

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

这一篇介绍一下基于node.js 的 websocket的移动端H5直播开发, 下载文章底部的源码,我是用vscode打开, 首先在第一个终端运行 npm run http-server 这个指令是运行http服务,手机端直接运行http://ip:8000/mpegts.html 即可看到推流过来的视频 新起一个终端运行 npm run ws-server,服务启动后,即可以通过ffmpeg进行推流. 推流过程如下: 推流视频文件: ffmpeg -re -i E:\2.mp4   -code

node.js基于websocket实时通信的实现—GoEasy

node.js websocket实时消息推送 在这里我记录一下之前如何实现服务器端与客户端实时通信: 实现步骤如下: 1.        获取GoEasy appkey. 在goeasy官网上注册一个账号,并新建一个app. APP创建好后系统会为该app自动生成两个key, 一个既可以用来接收又可以用来推送 (supper key),另一个只可以用来接收(subscriber key). 2.        客户端订阅一个channel. a.        在客户端引入goeasy.js,

Node.js配合WebSocket实现网页斗地主(一、环境配置)

最近闲着没事,研究了一下Node.js技术.发现Node.js真的很强大,它配合socket.io竟然可以实现Web的socket通讯技术.所以我决定来做个Web版的斗地主来好好玩玩这个WebSocket技术,呵呵!!! 先来部署环境 1.安装Node.js 根据自己的操作系统,去Node.js官网下载安装即可.如果成功安装.在命令行输入node -v和npm -v应该能看到相应的版本号.下面是我的版本信息 1 node -v 2 v4.0.0 3 npm -v 4 2.14.2 2.搭建Web

node.js之websocket协议的实现

websocket已经不是什么新鲜的东西了,要在node.js上实现也有socket.io这样好用的第三方模块.但是个人有代码洁癖,实在是受不了在HTML页面上多出一行如下代码:     <script src='http://192.168.0.143:4000/socket.io/socket.io.js'></script> 而且,项目上要实现的效果是和canvas交互,有些东西还是和socket封装在一起比较简单,所以自己踏上了探究websocket的道路. 顺便共享下我的

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

Node.js是一个Javascript运行环境(runtime).实际上它是对Google V8引擎进行了封装.V8引 擎执行Javascript的速度非常快,性能非常好.Node.js对一些特殊用例进行了优化,提供了替代的API,使得V8在非浏览器环境下运行得更好.Node.js是一个基于Chrome JavaScript运行时建立的平台, 用于方便地搭建响应速度快.易于扩展的网络应用.Node.js 使用事件驱动, 非阻塞I/O模型而得以轻量和高效,非常适合在分布式设备上运行的数据密集型的

node.js和websocket实现echo

最近在学习node.js,其中一章讲了WebSocket相关的内容.我看的书是<了不起的node.js>.这本书中实现了一个echo例子,但是我照书上做的程序却出现了错误.书中使用了express和websocket.io实现的这个例子.然而例子的express版本还是古老的2.5.1,最新的已经是4..了,所以出了问题也不奇怪. 书中的服务器代码片段大概是这样的: var express = require('express') , wsio = require("websocke

如何解决Vue.js里面noVNC的截图问题(2)——蛋疼的cookies验证和node.js的websocket代理

在上一篇讲noVNC截图功能的文章中,我们利用WebSocket协议的连接不检查跨域的特性解决了noVNC截图失败的问题. 但是这个方法仅限于没有cookies验证的noVNC服务,但是openstack的noVNC服务,每个虚拟机都要带token,而这个token,是写在cookies里面的. 看了openstack虚拟桌面的代码,知道里面的代码用token = WebUtil.getQueryVar('token', null);和WebUtil.createCookie('token',

面向Web Cloud的HTML5 App开发实战:Browser&amp;HTML5&amp;CSS3&amp;PhoneGap&amp;jQuery Mobile&amp; WebSocket&amp;Node.js(3天)

课程简介: 王家林老师(联系邮箱[email protected] 电话:18610086859 QQ:1740415547 微信号:18610086859) 22个HTML5主题一次性贯穿HTML5的一切技术: 一网打尽HTML5时代Device.(设备端).Browser(浏览器)和Cloud(浏览器)的所有技术: 以浏览器定制技术为基础,通晓HTML5+CSS3+PhoneGap+Web Socket +jQuery Mobile +Node.js等HTML5的六大核心技术: 最新研发的H

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

原文:http://www.jianshu.com/p/d9b1273a93fd Web领域的实时推送技术,也被称作Realtime技术.这种技术要达到的目的是让用户不需要刷新浏览器就可以获得实时更新.它有着广泛的应用场景,比如在线聊天室.在线客服系统.评论系统.WebIM等. WebSocket简介 谈到Web实时推送,就不得不说WebSocket.在WebSocket出现之前,很多网站为了实现实时推送技术,通常采用的方案是轮询(Polling)和Comet技术,Comet又可细分为两种实现方