Socket.io聊天室

Ghost目录下安装 Socket.io
npm install socket.io

在Ghost目录下的index.js新增代码
var io = require('socket.io')(2368);
io.on('connection', function (socket) {
socket.emit('news', { Server: 'Connect to the Winds Server...' });

socket.on('chat', function(data){
    socket.emit("notice", {message: data.message});
    socket.broadcast.emit("notice", {message: data.message});
    console.log("chat: " + data.message);
});
});

发布一个静态页面,名字叫chat,模板文件page-chat.hbs
<!DOCTYPE html>
<html lang="zh-CN">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">

<title>Chat</title>
<link rel="shortcut icon" href="{{asset "favicon.ico"}}">
<script src="http://localhost:2368/socket.io/socket.io.js"></script>
<script src="{{asset "js/jquery-2.1.0.min.js"}}"></script>
<!--    <script src="{{asset "js/socket.io.js"}}"></script>-->
<script>
    //建立连接
var socket = io.connect('http://localhost:2368');
    //收到服务器的连接确认
socket.on('news', function (data) {
    document.getElementById('AllMessage').innerHTML +="<span>"+"_> "+ "Connect to the Winds Server..." + "</span><br>" + "<span>"+"_> "+ "Welcome to Shell..." + "</span><br><br>";
    console.log(data);
});

socket.on("notice", function(data){
    var msg = document.getElementById('AllMessage').value;
    var text = data.message.replace(/<\/?[^>]*>/g,'');
    document.getElementById('AllMessage').innerHTML +="<span>"+"_> "+ text + "</span><br>";
    console.log(data);
    document.getElementById("message").value = "";
});

document.onkeydown = function(event){
    var e = event || window.event || arguments.callee.caller.arguments[0]; 
    if(e && e.keyCode==13){
        var msg = document.getElementById("message").value;
        socket.emit("chat", {message: msg});
    }
};
</script>  
<style>
    html{
        font-size: 15px;
    }    
    *{
        box-sizing:border-box;  
        -moz-box-sizing:border-box; /* Firefox */  
        -webkit-box-sizing:border-box; /* Safari */  
    }
    body{
        margin: 0;
        padding: 0;
    }
    #MessageRoom{
        position: absolute;
        background-color: #000000;
        width: 100%;
        min-height: 100%;        
    }
    #AllMessage{
        position: relative;
        background-color: #000000;
        color: #2ECC71; 
        width: 100%;
        height: 100%;
        border: 0;
        resize:none;
        outline:none;
        font-size:1rem;
        padding: 0 0 10px 0;
    }
    #message{
        position: relative;
        background-color: #2C3E50;
        color: #2ECC71; 
        width: 100%;
        border: 0;
        font-size:1rem;
        outline:none;
    }
</style>    
</head>
<body>
  <div id="MessageRoom">
    <div id="AllMessage"></div>
    <input type="text" id="message"/></input>
  </div>
</body>
</html>

完成后,访问http://127.0.0.1:2368/chat/
目前使用Google Chrome浏览器访问正常,而在Firefox等浏览器下,出现404错误提示,目前尚未解决...有兴趣的朋友,可以研究下。

1 个评论

解决Firefox等浏览器错误,socket.io 监听端口使用其他端口如:7777

要回复文章请先登录注册