码迷,mamicode.com
首页 > 其他好文 > 详细

简单的多人聊天室

时间:2020-06-08 14:36:38      阅读:64      评论:0      收藏:0      [点我收藏+]

标签:line   sock   other   query   nic   接受   javascrip   user   input   

1.安装nodejs-websocket 和 socket.io

npm install nodejs-websocket  socket.io

2.html 中引入socket.io.js文件

在html中 通过 socket = io(‘ws://localhost:3000/‘);开启socket连接,通过socket.emit(‘对应于服务器的自定义事件名’,‘内容’)发送信息,socket.on(‘对应于服务器的事件名’,‘内容’)接受信息

代码如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
            <script src="socket.io.js"></script>
            <script type="text/javascript" src="jquery-2.1.4.min.js"></script>
    </head>
    <body>
        <input type="text" name="" id="cont" value="" />
        <button type="button" id="send">发送</button>
        <script type="text/javascript">
            const socket = io(‘ws://localhost:3000/‘);
            
            function showMessage(str,type){
              var div = document.createElement(‘div‘);
              div.innerHTML = str;
              if(type==‘enter‘){
                  div.style.color = ‘royalblue‘
              }else if(type==‘leave‘){
                  div.style.color = ‘red‘
              }
              document.body.appendChild(div)
            }
            
            $(‘#send‘).on(‘click‘,function(){
                var txt = $(‘#cont‘).val();
                if(txt){
                    socket.emit(‘message‘,txt)
                }
            })
              socket.on(‘enter‘, (data) => {
                showMessage(data,‘enter‘)
                // socket.emit(‘my other event‘, { my: ‘data‘ });
              });
              socket.on(‘message‘, (e) => {
                showMessage(e,‘message‘)
              });
              socket.on(‘leave‘, (e) => {
                showMessage(e,‘leave‘)
              });
             
        </script>
    </body>
</html>

服务器端(server.js)

const app = require(‘http‘).createServer()
const io = require(‘socket.io‘)(app);

var clinet = 0;
var port = 3000
app.listen(port);

io.on(‘connection‘, (socket) => {
    clinet++;
    socket.nickname = "user"+clinet
    io.emit(‘enter‘, socket.nickname + "进入聊天室");
    
    socket.on(‘message‘, (data) => {
      io.emit(‘message‘, socket.nickname + ":"+data);
    });
    socket.on(‘disconnect‘, (data) => {
      io.emit(‘leave‘, socket.nickname + "离开聊天室");
    });
});
console.log(‘server is running on ‘+port)

然后通过node server.js启动服务

简单的多人聊天室

标签:line   sock   other   query   nic   接受   javascrip   user   input   

原文地址:https://www.cnblogs.com/lzzxm/p/13065371.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!