nodejs结合Socket.IO实现websocket即时通讯

下面是“nodejs结合Socket.IO实现websocket即时通讯”的完整攻略。

一、什么是WebSocket

WebSocket是HTML5开始提供的一种在单个TCP连接上进行全双工通讯的协议。WebSocket协议在浏览器和服务器之间建立全双工通讯，使得浏览器可以实时向服务器推送数据。相比于传统的HTTP协议，WebSocket在实现实时通讯方面有很大的优势。

二、使用Socket.IO实现WebSocket通讯

Socket.IO是一种基于事件的实时双向通讯引擎，可以在浏览器和服务器间发送任何事件，包括附加数据。它是一个跨平台、跨浏览器的实时通讯协议，可以在node.js和浏览器之间建立稳定、实时、低延迟的通讯。

1. 安装Socket.IO

在node.js中，可以通过npm来安装Socket.IO，执行如下命令：

npm install socket.io

2. 创建WebSocket服务器

为了处理WebSocket请求，我们需要创建一个WebSocket服务器。只需要几行简单的代码就可以完成：

const app = require('http').createServer(handler);
const io = require('socket.io')(app);

app.listen(3000);

function handler(req, res) {
  res.writeHead(200);
  res.end("Welcome to my WebSocket server");
}

这段代码会创建一个HTTP服务器，然后通过socket.io将其升级为WebSocket服务器。handler函数用于处理请求，并返回欢迎信息。

3. 客户端连接WebSocket服务器

我们利用socket.io客户端库在浏览器中连接WebSocket服务器，代码如下：

<script src="/socket.io/socket.io.js"></script>
<script>
  var socket = io.connect('http://localhost:3000');
  socket.on('connect', function(){
    console.log('连接成功');
  });
  socket.on('message', function(msg){
    console.log(msg);
  });
</script>

这段代码通过io.connect函数连接WebSocket服务器，并在连接建立和接收到消息时，输出相应的信息。

4. 服务器端发送消息到客户端

在服务器端，我们可以通过io对象，发送消息到客户端。代码如下：

setInterval(function(){
  io.emit('message', '这是一条广播消息');
}, 5000);

这段代码每隔5秒钟将一条广播消息发送到所有客户端。

示例一

下面是一个完整的实例，代码中包括了客户端和服务端的代码：

server.js

const app = require('http').createServer(handler);
const io = require('socket.io')(app);

app.listen(3000);

function handler(req, res) {
  res.writeHead(200);
  res.end("Welcome to my WebSocket server");
}

setInterval(function(){
  io.emit('message', '这是一条广播消息');
}, 5000);

client.html

<!DOCTYPE html>
<html>
<head>
  <script src="/socket.io/socket.io.js"></script>
</head>
<body>
  <script>
    var socket = io.connect('http://localhost:3000');
    socket.on('connect', function(){
      console.log('连接成功');
    });
    socket.on('message', function(msg){
      console.log(msg);
    });
  </script>
</body>
</html>

在命令行中执行node server.js命令启动WebSocket服务器，然后在浏览器中打开client.html页面，就可以看到客户端连接服务器并输出接收到的广播消息的信息。

示例二

下面是另一个简单的示例，代码中展示了如何将客户端向服务器发起的请求，广播给所有的客户端：

server.js

const app = require('http').createServer(handler);
const io = require('socket.io')(app);

app.listen(3000);

function handler(req, res) {
  res.writeHead(200);
  res.end("Welcome to my WebSocket server");
}

io.on('connection', function(socket) {
  console.log('有新客户端连接：' + socket.id);
  socket.on('request', function(msg) {
    console.log('收到客户端的请求：' + msg);
    io.emit('response', msg);
  });
});

client.html

<!DOCTYPE html>
<html>
<head>
  <script src="/socket.io/socket.io.js"></script>
</head>
<body>
  <input type="text" id="input">
  <button onclick="sendRequest()">发起请求</button>
  <br>
  <br>
  <ul id="messages"></ul>
  <script>
    var socket = io.connect('http://localhost:3000');
    socket.on('connect', function(){
      console.log('连接成功');
    });
    socket.on('response', function(msg){
      var li = document.createElement('li');
      li.innerText = msg;
      document.getElementById('messages').appendChild(li);
    });

    function sendRequest() {
      var request = document.getElementById('input').value;
      socket.emit('request', request);
    }
  </script>
</body>
</html>

启动WebSocket服务器，然后在浏览器中打开client.html，并在文本框中输入请求，点击发起请求按钮，就可以看到服务器返回的响应广播给了所有客户端。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：nodejs结合Socket.IO实现websocket即时通讯 - Python技术站