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

使用socket.io实现简单的聊天功能

时间:2018-04-09 13:22:13      阅读:194      评论:0      收藏:0      [点我收藏+]

标签:慕课   charset   head   creates   set   方法   doc   ESS   roo   

Socket.io实际上是WebSocket的父集,Socket.io封装了WebSocket和轮询等方法

首先得在你的项目中安装socket.io

$ npm install socket.io

服务端代码:

var app=require(http).createServer()
var io=require(socket.io)(app)
var PORT =5555;
var clientCount=0;

app.listen(PORT)

io.on(connection,function(socket){
    clientCount++
    socket.nickname=user+clientCount
    io.emit(enter,socket.nickname+ comes in)

    socket.on(message,function(str){
        io.emit(message,socket.nickname+ says: +str)
    })

    socket.on(disconnect,function(){
        io.emit(leave,socket.nickname+ left)
    })
})

客户端代码:

<!DOCTYPE html>
<html>
<head>
    <mate charset=utf-8 />
    <title>websocket</title>
    <script src="socket.io.js"></script>
</head>
<body>
    
    <h1>chat room</h1>
    <input type="text" id=sendtxt />
    <button id=sendbtn>发送</button>
    <div id="recv"></div>
    <script type="text/javascript">
        var socket=io("ws://localhost:5555/");

        function showMessage(str,type){
            var div=document.createElement(div);
            div.innerHTML=str;
            if(type==enter){
                div.style.color=blue;
            }else if(type==leave){
                div.style.color=red
            }
            document.body.appendChild(div);
        }

        document.getElementById(sendbtn).onclick=function(){
            var txt=document.getElementById("sendtxt").value;
            if(txt){
                socket.emit(message,txt);
            }
        }

        socket.on(enter,function(data){
            showMessage(data,enter)
        })

        socket.on(message,function(data){
            showMessage(data,message)
        })

        socket.on(leave,function(data){
            showMessage(data,leave)
        })
        
    </script>
</body>
</html>

来自慕课网课程:

https://www.imooc.com/learn/861

使用socket.io实现简单的聊天功能

标签:慕课   charset   head   creates   set   方法   doc   ESS   roo   

原文地址:https://www.cnblogs.com/qiufang/p/8610438.html

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