初探sockit.io简易服务端及客户端聊天

上一篇讲到了websocket,本篇提一下基于上一篇更简易的语法,那就是强大的socketio

如果有看到该文章的小伙伴们,麻烦加一下关注及小爱心点一点,非常感谢!!! 注意点的是以下的知识需要你对\color{red}{NodeJs,WebSocket等}有一定的了解,废话少说,来吧少年! \color{red}{切记!!!几乎手把手教,不要白嫖,一定要点赞加关注!!!}
技术要点:NodeJssocket.io、js、jqueryexpress
一、因为此次的websocket纯前端语言,需要 一个客户端 用于用户访问、一个服务端 用户服务器反馈信息。

1.初始化你的包 npm init -y
2.npm install socket.io -D (这里喜欢用yarn或者cnpm安装的都行)
3.npm install express -D (这里喜欢用yarn或者cnpm安装的都行)

// 1.服务端 server.js
//引入express
const app = require('express')();
//将express挂载创建的http服务中
const server = require('http').createServer(app);
// express处理静态资源
// 把public目录设置为静态资源
app.use(require('express').static('public'))

app.get('/', function (req, res) {
  // 重定向到public文件下index.html
  res.redirect('/index.html')
})

// 创建socketio
const io = require('socket.io')(server)
// socketio 连接
io.on('connection', socket => {
   socket.emit('system','欢迎进入大佬的房间!')
// 接受客户端发送的信息
   socket.on('sendMsg',data=>{
// 广播信息
    io.emit('reveiceMsg',data)
   })
});
// 服务端口
server.listen(8888);
//2 客户端
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Minimal working example</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <input type="text" class="input">
    <button class="submit">发送</button>
    <div class="content"></div>
    
    <script src="/socket.io/socket.io.js"></script>
    <script>
        const socket = io('http://localhost:8888');
        socket.on('system', (data) => {
          $('.content').text(data)
        });
        // 发送
        $('.submit').on('click',function(){
          socket.emit('sendMsg',$('.input').val())
        })
        socket.on('reveiceMsg',data=>{
          console.log(data)
            $('.content').append(data)
         })
    </script>
</body>
</html>
//3 进入你服务端开启node服务
node server.js  或者nodemon server.js

\color{red}{是不是很简单?! 还等什么一波关注一波点赞走起!!!}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容