socket.io + nodes 实现webSocket消息提醒

来源：互联网发布：js怎么给span赋值编辑：程序博客网时间：2024/05/03 10:02

nodejs和socket.io的安装就不多说了

那么Socket.IO到底是什么呢？Socket.IO是一个WebSocket库

包括了客户端的js和服务器端的nodejs

它会自动根据浏览器从WebSocket、AJAX长轮询、Iframe流等等各种方式中选择最佳的方式来实现网络实时应用，非常方便和人性化，

而且支持的浏览器最低达IE5.5，应该可以满足绝大部分需求了。

下面是代码

服务器端:index.js

var app = require('express')();var http = require('http').Server(app);var io = require('socket.io')(http);app.get('/', function(req, res){  res.sendFile(__dirname + '/index.html');});io.on('connection', function(socket){  socket.on('chat message', function(msg){    io.emit('chat message', msg);  });});http.listen(3000, function(){  console.log('listening on *:3000');});

客户端

<!doctype html><html>  <head>    <title>Socket.IO chat</title>    <style>      * { margin: 0; padding: 0; box-sizing: border-box; }      body { font: 13px Helvetica, Arial; }      form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }      form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }      form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }      #messages { list-style-type: none; margin: 0; padding: 0; }      #messages li { padding: 5px 10px; }      #messages li:nth-child(odd) { background: #eee; }    </style>  </head>  <body>    <ul id="messages"></ul>    <form action="">      <input id="m" autocomplete="off" /><button>Send</button>    </form>    <script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>    <script src="http://code.jquery.com/jquery-1.11.1.js"></script>    <script>      var socket = io();      $('form').submit(function(){        socket.emit('chat message', $('#m').val());        $('#m').val('');        return false;      });      socket.on('chat message', function(msg){        $('#messages').append($('<li>').text(msg));      });    </script>  </body></html>

启动服务端服务，node index.js

浏览器访问http://xxx:3000

就可以实现即时通讯

下面是更多的知识补充：

//接上面的代码
app.get('/', function (req, res) {
res.sendfile(__dirname + '/index.html');});

io.sockets.on('connection', function (socket) {
    socket.emit('news', { hello: 'world' });
    socket.on('other event', function (data) {
        console.log(data);
    });
});

socket最关键的是emit和on两个函数，

emit:前者提交（发出）一个事件（事件名称用字符串表示），事件名称可以自定义，也有一些默认的事件名称，紧接着是一个对象，表示向该socket发送的内容；

on:后者接收一个事件（事件名称用字符串表示），紧接着是收到事件调用的回调函数，其中data是收到的数据。

在上面的例子中，

我们发送了news事件和收到了other event事件，

那么客户端应该会有对应的接收和发送事件。

没错，客户端代码和服务器正好相反，而且非常相似。这句话非常重要

如下：

有两点要注意的：socket.io.js路径要写对，这个js文件实际放在了服务器端的node_modules文件夹中，在请求这个文件时会重定向，因此不要诧异服务器端不存在这个文件但为什么还能正常工作。当然，你可以把服务器端的socket.io.js这个文件拷贝到本地，使它成为客户端的js文件，这样就不用每次都向Node服务器请求这个js文件，增强稳定性。第二点是要用var socket = io.connect('网站地址或ip');来获取socket对象，接着就可以使用socket来收发事件。关于事件处理，上面的代码表示收到“news”事件后，打印收到的数据，并向服务器发送“other event”事件。

注：内置默认的事件名例如“disconnect”表示客户端连接断开，“message”表示收到消息等等。自定义的事件名称，尽量不要跟Socket.IO中内置的默认事件名重名，以免造成不必要的麻烦。

4. 其他常用API

1).向所有客户端广播：socket.broadcast.emit('broadcast message');

2).进入一个房间（非常好用！相当于一个命名空间，可以对一个特定的房间广播而不影响在其他房间或不在房间的客户端）：socket.join('your room name');

3).向一个房间广播消息（发送者收不到消息）：socket.broadcast.to('your room name').emit('broadcast room message');

4).向一个房间广播消息（包括发送者都能收到消息）（这个API属于io.sockets）：io.sockets.in('another room name').emit('broadcast room message');

5).强制使用WebSocket通信：（客户端）socket.send('hi')，（服务器）用socket.on('message', function(data){})来接收。

说说我在项目中的使用：

项目中我用他作为消息提醒功能：

使用大概是这样的

我在服务器部署了node+socket.io的环境

在服务器写好node服务：hasNewMessage.js

var app = require('express')();var http = require('http').Server(app);var io = require('socket.io')(http);app.get('/', function(req, res){  res.sendFile(__dirname + '/hasNewMessage.html');});io.on('connection', function(socket){  socket.on('hasNewMessage', function(userId){console.log('userId:'+userId);    io.emit('hasNewMessage', userId);  });});http.listen(3000, function(){  console.log('listening on *:3000');});

该服务注册了事件 hasNewMessage

客户端只需要发射这个事件就可以受到消息了

由于，我的服务端是java实现的，所以需要咋java工程里面添加 socket.io-client的jar包

具体有这几个依赖包：http://maven.outofmemory.cn/com.github.nkzawa/socket.io-client/0.1.2/

java中调用，只需要简单的emit事件就可以，代码如下

0 0