Fork me on GitHub

socket.io 01开始

socket.io 为基于nodejs socket协议的插件。方便实现web即时通信技术。

前言

从零开始搭建一个简易多人聊天平台。无分组。
Socket.i 分两部分,一部分为服务端,另一部分为客户端。

准备

创建一个文件夹。
npm init 初始化项目,自动生成package.json文件
npm install express socket.io下载本章节需要的依赖

总体的目录结构

| - server.js
| - public
| - | - index.html
| - | - client.js

走起

服务端

创建server.js文件

const express = require('express')
const socketIo = require('socket.io')
const http = require('http')
const path = require('path')

const app = express()
const server = http.Server(app)
const io = socketIo(server)

app.use('/', express.static(path.resolve(__dirname, 'public'))) // 创建静态资源目录

io.on('connection', (socket) => { // 连接事件,当用户连接时会唤起该方法
    console.log('a user connected')
    socket.on('chat message', (msg) => { // 接收客户端发送的消息
        socket.broadcast.emit('chat message', msg) // 推送该消息给所有人
    })
    socket.on('disconnect', () => { // 断开事件,当用户断开连接时唤起该方法
        console.log('user disconnected')
    })
})

server.listen(3000, () => { // 启动服务,注意这里不是 `app.listen`
    console.log('localhost:3000')
})

客户端

创建public/index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>test</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <input type="text" placeholder="输入聊天内容" required id="message">
    <button type="button" id="commit">提交</button>
    <div id="content"></div>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <script src="https://cdn.bootcss.com/socket.io/2.0.4/socket.io.js"></script>
    <script src="client.js"></script>
</body>
</html>

创建文件public/client.js

(function () {
    var input = $('#message')
    var socket = io()

    $('#commit').click(e => {
        if (input.val()) {
            socket.emit('chat message', input.val()) // 向服务端发送消息
            input.val('')
        } else {
            alert('请输入聊天内容!')
        }

    })
    socket.on('chat message', function (msg) { // 接收从服务端推送过来的消息
        let p = $('<p></p>')
        p.text(msg)
        $('#content').append(p)
    });
})()

运行

node server.js
打开 localhost:3000
多打开几个页面,就可以看见多个实时通信的效果。