socket实现简单的聊天功能

以下我分别用了websocket和socket.io来实现
原文博客

socket.io官网

websocket官网

websocketAPI

简单聊天室

socket.io

服务端要安装插件socket.io

npm install --save socket.io

客户端安装插件socket.io-client

npm install --save socket.io-client

socket.io接收和发送事件

  1. 服务端代码(框架express)
//app.js
var app = require('express')();
var server = require('http').Server(app);
var io = require('socket.io')(server);

server.listen(80);
 
app.get('/', function(req, res) {
    res.sendFile(__dirname + '/index.html');
});

io.on('connection', function(socket) {
    //emit发送事件
    socket.emit('news', { hello: 'world' });
    //接收事件
    socket.on('my other event', function(data) {
        console.log(data);
    });
});
  1. 客户端代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- 客户端要引入socket.io.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js"></script>
    <title>Document</title>
</head>

<body>
    <script>
        var socket = io('http://localhost');
        socket.on('news', function(data) {
            console.log('data:' + data);
            socket.emit('my other event', {
                my: 'data'
            });
        });
    </script>
</body>

</html>

简单的聊天功能

//app.js
var app = require('express')();
var server = require('http').Server(app);
var io = require('socket.io')(server);
var clientCount = 0;
server.listen(2000);

app.get('/', function(req, res) {
    res.sendFile(__dirname + '/index.html');
});

io.on('connection', function(socket) {
    clientCount++;
    socket.nickname = '用户' + clientCount
        //广播
    io.emit('enter', socket.nickname + '进来了')
    socket.on('message', (str) => {
        io.emit('message', socket.nickname + 'says:' + str)
    })
    socket.on('disconnect', () => {
        io.emit('leave', socket.nickname + '离开了')
    })
});

<!-- index.htm -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- 客户端要引入socket.io.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js"></script>
    <title>Document</title>
</head>

<body>
    <div>
        <h1>聊天室</h1>
        <input type="text" id="sendTxt">
        <button id="send">发送</button>
    </div>
    <script>
        var socket = io('http://172.19.10.178:2000');
        document.getElementById('send').addEventListener('click', () => {
            var txt = document.getElementById('sendTxt').value;
            if (txt) {
                socket.emit('message', txt)
            }
        })
        socket.on('enter', function(data) {
            showMessage(data)
        });
        socket.on('leave', function(data) {
            showMessage(data)
        });
        socket.on('message', function(data) {
            showMessage(data)
        });

        function showMessage(str, type) {
            let div = document.createElement('div')
            div.innerHTML = str
            document.body.appendChild(div)
        }
    </script>
</body>

</html>

websocket

简单demo

var websocket = new WebSocket("ws://echo.websocket.org/");
//连接
websocket.onopen = function() {
    showMessage('connected')
}
//关闭
websocket.onclose = function() {
    showMessage('close')
}
//接收数据
websocket.onmessage = function(e) {
    showMessage(e.data)
}
document.getElementById('send').addEventListener('click', () => {
    var txt = document.getElementById('sendTxt').value;
    if (txt) {
        //发送数据
        websocket.send(txt)
    }
})
function showMessage(str, type) {
    let div = document.createElement('div')
    div.innerHTML = str
    document.body.appendChild(div)
}

自己搭建node来实现简单聊天室

  1. 安装插件nodejs-websoket

2.代码

var ws = require("nodejs-websocket")
var clientCount = 0;

var server = ws.createServer(function(conn) {
    console.log("New connection")
    clientCount++;
    conn.nickname = '用户' + clientCount
    broadcast(conn.nickname + '进来了')
    conn.on("text", function(str) {
        broadcast(conn.nickname + 'says:' + str)
    })
    conn.on("close", function(code, reason) {
        broadcast(conn.nickname + '离开了')
    })
    conn.on("error", function(err) {
        console.log(err)
    })
}).listen(3000)

function broadcast(str) {
    server.connections.forEach((connection) => {
        connection.sendText(str)
    })
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div>
        <h1>聊天室</h1>
        <input type="text" id="sendTxt">
        <button id="send" style="cursor: pointer">发送</button>
    </div>
    <script>
        var websocket = new WebSocket("ws://172.19.10.178:3000/");
        websocket.onopen = function() {
            document.getElementById('send').addEventListener('click', () => {
                var txt = document.getElementById('sendTxt').value;
                if (txt) {
                    //发送数据
                    websocket.send(txt)
                }
            })
        }
        websocket.onclose = function() {
            showMessage('close')
        }
        websocket.onmessage = function(e) {
            showMessage(e.data)
        }
        
        function showMessage(str, type) {
            let div = document.createElement('div')
            div.innerHTML = str
            document.body.appendChild(div)
        }
    </script>
</body>

</html>
Logo
CSDN学习社区

CSDN联合极客时间，共同打造面向开发者的精品内容学习社区，助力成长！

更多推荐

嵌入式作业（七）：基于Ardunio的STM32串口通信

嵌入式作业（七）0作业要求1Ardunio 完成STM32的串口通信（1）安装Ardunio IDE（2）stm32串口通信2关于 stduino IDE0作业要求安装 Ardunio IDE 和相关软件支持库，在Ardunio 完成STM32板子的串口通信程序：（1）持续向串口输出“Hello world！”；（2）当接收到“stop!”时，停止输出。网上有一个国人版的MCU集成开发平台， st

avatar CSDN学习社区

JDBC详解

JDBC文章目录JDBC什么是JDBC?JDBC驱动程序:Java使用JDBC访问数据库的步骤:设置classpath:Oracle连接字符串的书写格式:简单的例子:常用数据库的驱动程序及JDBC URL:Oracle数据库:SQL Server数据库MySQL数据库Access数据库PreparedStatement接口:JNDI-数据源（Data Source）与连接池（Connection

avatar CSDN学习社区

“模式识别与机器学习”学习笔记no2.再谈感知机

接**上篇：上篇主要进行了PLA，Pocket算法的理论过程分析和在给定数据集上利用pocket算法对数据集进行分类学习，得到错分数量最少的分类面。上篇中pocket算法的过程已经进行了编程和测试，框架已经建立了起来，这一篇主要上篇中没有提到或涉及不深的几个问题。1.数据集的构造。上篇是直接使用了题目给的向量，这次来根据正态分布来产生数据集。np.random.normal函数可以根据均值和方差生

avatar CSDN学习社区