lzzxm

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启动服务

分类:

技术点:

相关文章: