WebSocket基础及如何使用socket.io实现聊天室

2024-01-20 09:29:16

WebSocket 基础

WebSocket是一种双向通信协议，可在单一的 TCP 连接上进行全双工通信。它允许服务器和客户端实时交换数据，而无需持续地向服务器发送HTTP请求。WebSocket 是一种广泛用于即时通讯、在线游戏和多人游戏等应用中的技术。

Socket.io 介绍

Socket.io 是一个基于WebSocket的库，它提供了一组高层次的API，使得在Web应用程序中使用WebSocket变得更加简单。Socket.io 可以在Node.js和JavaScript中使用，并支持各种传输协议，包括WebSocket、JSONP、Ajax轮询等。

使用 Socket.io 实现聊天室

本节将以一个简单的聊天室为例，介绍如何使用 Socket.io 来实现即时通讯功能。首先，我们需要在Node.js中创建一个服务器：

var express = require('express');
var socketIO = require('socket.io');

var app = express();
var server = app.listen(3000);
var io = socketIO(server);

io.on('connection', function(socket) {
  console.log('A user connected');

  socket.on('message', function(message) {
    io.emit('message', message);
  });

  socket.on('disconnect', function() {
    console.log('A user disconnected');
  });
});

然后，我们需要在HTML页面中创建一个客户端：

<!DOCTYPE html>
<html>
<head>
  
  <script src="/socket.io/socket.io.js"></script>
  <script>
    var socket = io();

    socket.on('connect', function() {
      console.log('Connected to server');
    });

    socket.on('message', function(message) {
      console.log('Message received: ', message);
    });

    socket.on('disconnect', function() {
      console.log('Disconnected from server');
    });

    function sendMessage() {
      var message = document.getElementById('message').value;
      socket.emit('message', message);
    }
  </script>
</head>
<body>
  <input type="text" id="message">
  <button onclick="sendMessage()">Send</button>
</body>
</html>