socket.io写一个本地聊天室

睡一分钟就好

已于 2024-03-11 10:31:41 修改

阅读量641

点赞数 3

分类专栏： webSocket 文章标签：本地聊天室 websocket

于 2018-04-17 14:52:12 首次发布

本文链接：https://blog.csdn.net/weixin_41968146/article/details/79972236

版权

webSocket 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

官方文档地址：Get started | Socket.IO

一、新建一个项目文件夹Socket

二、在控制台输入以下命令，会生成一个page.json文件

 npm init -y

三、输入命令，安装express及socket.io

npm install express --save   
npm install socket.io --save-dev

四、成功后，接着在socket下面创建两个并级的public文件夹和app.js文件

目录是这样的：

五、引入jquery，在public写一个index.html ，内容如下：

<!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="/socket.io/socket.io.js"></script>
<script src="js/jquery-3.2.1.min.js"></script>
<script>
    $(function () {
        var socket = io();
        //显示信息
        function appendMessage(msg) {
            $("#messages").append("<li>"+msg+"</li>");
        }
        //发送信息
        $("button").on("click",function () {
            var msg=$("#m").val();
            socket.emit("chat message",msg);
            appendMessage(msg);
            $("#m").val("");
            return false;
        });
        //收到新消息
        socket.on("chat message",function (msg) {
            appendMessage(msg);
        })
    })
</script>
</body>
</html>

app.js里写

var express=require("express");
var app=express();
var path=require("path");
var http=require("http").Server(app);
var io = require('socket.io')(http);
app.use(express.static(path.join(__dirname,"public")));
app.get('/', function(req, res){
    res.sendFile(__dirname + '/public/index.html');
});

//客户端连接
io.on("connection",(socket)=>{
    console.log('客户端连接', socket.id);
    //客户端断开连接
    socket.on("disconnect",()=>{
        console.log("客户端断开连接");
    });
    //客户端发来信息
    socket.on("chat message",(msg)=> {
        console.log(msg);
        socket.broadcast.emit("chat message",msg);
    })
});
http.listen(3006,()=>{
    console.log("listening on*:3006");
});

六、安装一个自动运行（目的是不需要每次npm start）

npm install nodemon --save

七、成功后，package.json里的scripts加上一个start

八、运行npm start命令

npm start

一个基础的聊天室就好了，可以多打开几个窗口，模拟不同用户有的对话

io.emit所有人都能看见
socket.emit只有发消息的本人能看见
socket.boardcast.emit除了自己以外的其他人能看见

功能增加：

1、增加了昵称

2、增加了私聊

3、增加用不同样式区分系统信息还是私聊以及添加发送时间

4、用户昵称冲突及显示用户在线列表

5、地存储用户昵称