用Socket.IO写一个本地聊天室

最近用socket写了一个聊天室 ,刚学socket.io的同学们可以进文档扒一扒API

贴上socket.io文档地址:https://socket.io/get-started/chat/

如果要创建的话

首先新建一个项目文件夹Socket,在控制台输入:  npm init -y   会生成一个page.json文件

安装express、Socket.IO :cnpm install express --save   cnpm install socket.io --save-dev


成功后,我们接着在Socket下面创建一个public文件夹和一个 app.js(public和app.js是并级的)

目录是这样的:

在public写一个index.html , 内容贴上(一定要引入jquery 我这里引入的是3.2.1)

<!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)

在命令行里输入:cnpm install nodemon --save  

成功后,将package.json里的scripts加上一个start,就好了

我们就可以运行了。npm start

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

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

端口是 :   http://localhost:3006/


贴上Demo地址 :  https://github.com/shaolinhui/socket

这个demo里比较完善,已经git上去了,大家也可以去看看,都会有注释

功能的话:

1、增加了昵称

2、增加了私聊

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

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

5、地存储用户昵称

如果运行的话,先cnpm install   然后在npm start ,就可以看效果了吐舌头


阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页