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

最新推荐文章于 2023-06-11 12:57:53 发布

置顶 shuiya3

最新推荐文章于 2023-06-11 12:57:53 发布

阅读量2.4k

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/shuiya3/article/details/9351991

版权

js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

在使用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 οnlοad="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