新手入门,没办法,只能选择不断不断的google吧。

找了很多的例子都跑不了,不知道什么原因。

后,自己在git搜索吧,选择了一个下面的例子: nodejs-web-socket

经过我的改造,改成我自己想要的方式。

只是将客户端发送的数据直接原封不动发回客户端。

先说说运行环境:window 7 ,node v0.10.5,全局安装了websocket.io模块,chrome 28浏览器。

(注:以下提到的两个js文件放在同一层目录下面即可,html文件随便放置)

这是后台的js代码:

1、将其存为socketServer.js文件里面,并且进行module导出。

/*
仅用于测试,
客户端发送的东西将被服务器原封不动的返回到客户端
运行环境:node v0.10.5
window 7
chromw 28
*/
/*var server = */module.exports = ( function() {
var ws = require('websocket.io');
var socketServer = null;
var socketInitListen = function(port) {
socketServer = ws.listen(port);
socketServer.on('listening',function() {
console.log('Socket server running');
});
socketServer.on('connection',function(socket) {
console.log('Connected to client');
socket.on('message', function(data) {
// client send message to server
console.log('Server received message : ',data);
socket.send(data);
});
socket.on('close',function() {
socket.send('close');
})
})
};
var init = function(socketPort) {
socketInitListen(socketPort);
};
return {
init: init
};
})(); // server.init(9000);

2、引用上面那个module的文件,并且将端口绑定为9000端口,存为文件server.js。

var socketServer = require('./socketServer').init(9000);

3、页面的代码 :index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>WebSockets Node.js</title>
<style>
.container{
margin:auto;
width:300px;
}
label,input{
width:200px;
float:left;
}
input[type=button]{
float:right;
width:80px;
}
</style>
<script src="http://code.jquery.com/jquery.min.js"></script>
</head>
<body>
<div class="container">
<label for="content">发送的内容:</label><input type="text" id="content" value="input something" />
<label for="recive">收到的内容:</label><input type="text" id="recive" />
<input type="button" id="send" value="点击发送" />
</div>
<script>
// websocket 连接变量
var wsConn;
(function () {
try {
wsConn = new WebSocket('ws://127.0.0.1:9000');
} catch (e) {
console.log("websocket 连接出错。");
console.log(e);
}
})(); $(function() {
if (wsConn) {
wsConn.onopen = function() {
console.log("open Connection.");
};
wsConn.onmessage = function(msg) {
console.log("onmessage.");
console.log(msg.data);
$('#recive').val(msg.data);
};
wsConn.onerror = function(msg) {
console.log("onerror.");
console.log(msg);
};
wsConn.onclose = function(msg) {
console.log("onclose.");
console.log(msg);
};
function wsConnSend(content) {
wsConn.send(content);
};
$('#send').bind('click',function sendClick() {
wsConnSend($('#content').val())
})
}
});
</script>
</body>
</html>

这都是源码的三个文件。

运行的方法为:

1、安装node ,我的版本是0.10.5,其他版本没进行测试;

2、安装websocket.io,命令如下 npm i -g websocket.io;

3、环境弄好了,可以跑了,打开命令行,cd到当前目录,跑 node server.js。

4、直接用chrome以本地文件方式直接打开index.html ,里面操作简单。其他浏览器没进行测试。

搭建完毕。

这是控制台下面的一行命令的截图。

新手习作,若有出错,敬请大神指出。

nodejs 平台的 webscoket 的实现的更多相关文章

  1. NodeJS平台下的前后端文件共享

    一.前后端文件共享的需要背景——为什么需要共享? 项目基本JS/NodeJS全端开发,有部分代码前后端都需要用得到 有一些配置是在前后端都需要用得到的 区别其他开发平台,NodeJS平台下的前后端文件 ...

  2. Node.app让Nodejs平台在iOS和OS X系统上奔跑

    首先呢,欢迎大家去查看相同内容的链接:http://www.livyfeel.com/nodeapp/. 由于那个平台我用的markdown语法,我也懒得改动了,就这样黏贴过来了. 这是一个惊人的恐怖 ...

  3. 3分钟干货学会使用node-inspector调试NodeJS代码

    使用node-inspector调试NodeJS代码 任何一门完备的语言技术栈都少不了健壮的调试工具,对于NodeJS平台同样如此,笔者研究了几种调试NodeJS代码的方式,通过对比,还是觉得node ...

  4. 【转】前端工程筹建NodeJs+gulp+bower

    转自:http://www.myexception.cn/javascript/1781968.html npm nodejs 安装过程中会自动安装npm,nodejs安装程序会在环境变量中添加两个变 ...

  5. NodeJS 常用模块

    NodeJS 模块: n:NodeJS 版本管理/切换 参考: https://github.com/tj/n ExpressJS:Web 框架 参考: http://expressjs.com/ m ...

  6. angularjs, nodejs, express, gulp, karma, jasmine 前端方案整合

    今年转向做前端开发,主要是做angularjs开发,期间接触了nodejs平台,从此一发不可收拾. npm丰富的插件库,express 开发框架, grunt, gulp构建工具,karma测试管理工 ...

  7. 前端MVC学习总结(四)——NodeJS+MongoDB+AngularJS+Bootstrap书店示例

    这章的目的是为了把前面所学习的内容整合一下,这个示例完成一个简单图书管理模块,因为中间需要使用到Bootstrap这里先介绍Bootstrap. 示例名称:天狗书店 功能:完成前后端分离的图书管理功能 ...

  8. 前端工程筹建NodeJs+gulp+bower

    1.安装nodejs nodejs 官网下载安装文件 安装完成之后,在命令窗口执行,(显示nodejs版本) 和(显示npm版本)可以使用这两个命令查看是否安装成功: node -v npm -v 2 ...

  9. 前端MVC学习笔记(四)——NodeJS+MongoDB+AngularJS+Bootstrap书店示例

    这章的目的是为了把前面所学习的内容整合一下,这个示例完成一个简单图书管理模块,因为中间需要使用到Bootstrap这里先介绍Bootstrap. 示例名称:天狗书店 功能:完成前后端分离的图书管理功能 ...

随机推荐

  1. executeBatch()相关操作汇总

    环境:oracle使用PreparedStatement的executeBatch方法,如果DML操作成功,返回值[-2,-2,...]an array of update counts contai ...

  2. Cache基础知识OR1200在ICache一个简短的引论

    以下摘录<步骤吓得核心--软-core处理器的室内设计与分析>一本书 12.1 Cache基本知识 12.1.1 Cache的作用 处理器的设计者通常会声称其设计的处理器一秒钟能做多少次乘 ...

  3. JSON-C结构简介、使用

    官方站点介绍http://www.json.org JSON (JavaScript Object Notation) is a lightweight data-interchange format ...

  4. 变化Android系统属性SystemProperties.set(&quot;sys.powerctl&quot;, &quot;shutdown&quot;)关机分析

    基本介绍: 从以前的博客中提到,我们,最后,通过关机过程变化Android关机属性(SystemProperties.java由JNI呼叫接入系统属性),当然,我们也能adb命令变化Android系统 ...

  5. 用命令行在github新建一个项目

    Github Repository API中说明了可以通过发送一个请求来认证,之后就能通过命令行自动新建远程仓库了. 认证 curl -u 'username' https://api.github. ...

  6. Windows Cygwin Redis 安装(转)

    在win平台下编译Redis一般有两种方式: 1. 基于MS VC进行编译,生成原生可执行文件 该方式需要创建MSVC项目文件以及对Redis源码进行适当调整. 这里提供一个可行版本,由微软开放团队进 ...

  7. JAXB 操作XML 与 Object

    Java Architecture for XML Binding) 是一个业界的标准,是一项能够依据XML Schema产生Java类的技术.是一种xml与object映射绑定技术标准. JDK5下 ...

  8. tomcat-jQ-springMVC-bootstrap

    基于tomcat-jQ-springMVC-bootstrap的公司产品管理WEB应用 管理员登录后台以后才能操作 ,权限管理只有一个管理员, 系统的主要作用是查看所有的 “公司列表”, 并查看该公司 ...

  9. $.ajax()详解

    $.ajax()方法详解   jquery中的ajax方法参数总是记不住,这里记录一下. 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为Str ...

  10. Ansible@一个有效的配置管理工具--Ansible configure management--翻译(十)

    未经书面许可,.请勿转载 Custom Modules Until now we have been working solely with the tools provided to us by A ...