第17天,socket简易聊天室

19年8月

发布日期: 2019-08-30

阅读次数:

日报：看哔哩哔哩视频模仿了一个ｓｏｃｋｅｔ简易本地聊天室,解决个小问题.

解决了一个错误：

Errot:Cannot find module 'socket.io'

需要安装： npm install socket.io支持包依赖．

客户端代码：

<!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>聊天室界面</title>
</head>
<style>
    div {
        border: 1px solid yellow;
        background-color: aqua;
    }
</style>

<body>
    <h1 style="color: chartreuse">在下方输入发送内容</h1>

    <textarea name="" id="text" cols="30" rows="10"></textarea>
    <button id="btn">发送</button>
    <script type="text/javascript" src="http://wulv5.com/js/socket.io.min.js"></script>

    <script type="text/javascript">
        var socket = io.connect("/"); //连接聊天室的io 服务器
        var oText = document.getElementById("text");
        oBtn = document.getElementById("btn");
        oBtn.onclick = function() {
            var mes = oText.value;
            if (!mes) {
                return;
            }
            socket.send(mes); //如果文本框有内容　　　那就发消息去服务器
            oText.value = ""; //发完消息　　　清空文本框内容
        }

        socket.on("message", function(mes) {
            console.log(mes); //输出服务端发来的消息
            var div = document.createElement("div");
            div.className = "mes";
            div.innerText = mes;
            document.body.appendChild(div);
        })
    </script>
</body>

</html>

服务器代码:

var http = require("http");　　 //引入模块
var fs = require("fs"); //引入　　文件　　系统模块
var ws = require("socket.io"); //引入socket.io模块

var server = http.createServer(function(req, res) {
    var html = fs.readFileSync("./client.html");　　　 //调用fs 模块中的同步读文件方法
    res.end(html);
}).listen(3000); //监听端口
var io = ws(server); //  http　服务与ws 服务相关联　　　返回io服务实例

io.on("connection", function(socket) {
    //发生在用户链接io服务器的时候
    console.log("有新用户进入")
        //接收到客户端的消息
    socket.on("message", function(obj) {
        console.log(obj);
        io.emit("message", obj) //发送消息给所有已经连接的客户端　　广播
    });
});