express+socket.io完成客户端与服务器的通信

来源：互联网发布：9院13所知乎编辑：程序博客网时间：2024/06/05 02:59

在使用socket.io完成客户端与服务器通信时，客户端出现以下错误：

node.js app can't find socket.io。

由于本人是新手，所以调试花了一天的功夫，还在最后还是出来了。

出现这个错误，首先要确定服务器端没有问题。服务器端出现：info - socket.io started

表示服务器端没有问题，否则就是服务器端的问题。我的问题就是出现在服务器，而我却在客户端花了一天功夫，真是想屎的心情都有了。

首先要确认一点客户端 <script type="text/javascript" src="socket.io/socket.io.js"></script> 的写法是没有问题的。如果报错上述错误，则要么就是socket.io安装出来问题，确认使用 npm install socket.io安装。

要么就是服务器端的问题。只要仔细检查这两点。可以参考http://socket.io/#how-to-use。

当服务器出现

warn - error raised: Error: listen EADDRINUSE

错误时，多半是因为的使用的端口号已经被占用，例如我的服务器本来监听80端口，但是出现上述错误，将其改为8000后服务器正常。

附个人程序：

服务端

var express=require('express');var app = express()  , server = require('http').createServer(app)  , io = require('socket.io').listen(server);server.listen(8080);//启动 web服务，监听8080端口  app.use(express.static(__dirname + '/demo')); //设置工程目录,以当前目录下的demo目录为web应用根目录  app.get('/', function (req, res) {//设置默认访问页面  res.sendfile(__dirname + '/demo/demo.html');});  //添加监听，相应前台请求   io.sockets.on('connection', function(client){      //查询数据      client.on('getData', function () {          //模拟数据          var result = {              nodes: [                  {                      id: 'from',                      name: 'From',                      location: { x: 100, y: 100 }                  },                  {                      id: 'to',                      name: 'To',                      location: { x: 200, y: 200 }                  }              ],              links: [                  {                      id: 'from-to',                      name: 'Hello TWaver HTML5',                      from: 'from',                      to: 'to'                  }              ]          };          //返回数据          client.emit('getData', result);      });  });

客户端：

清单1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>socket.io</title>  <!--引用Socket.IO js库-->      <script type="text/javascript" src="socket.io/socket.io.js"></script>      <script type="text/javascript" src="./ws.js"></script>  </head> <body onload="init()">      <div id="main">      </div>  </body>  </html>

清单2

/*function getMessage(){var ws1=new WebSocket("ws:www.runwdr.com:4504");ws1.onmessage = printMess;}function printMess(event){alert(event.data);}*///定义获取数据消息key   var GET_DATA = 'getData';   //WebSockets引用   var socket;      function init() {       //创建WebSockets       socket = io.connect("http://localhost:8080");      //响应getData消息请求      socket.on(GET_DATA, onGetData);      //发送getData消息请求      socket.emit(GET_DATA);  }    //getData消息处理方法  function onGetData(data) {      console.log(data);      document.getElementById('main').innerHTML = JSON.stringify(data);  }

本文参考：http://www.html5china.com/HTML5features/WebSocket/20120513_3658.html