澳门游戏平台大全 澳门游戏平台大全 澳门游戏平台大全js_脚本之家,websocket创建简易聊天室

澳门游戏平台大全js_脚本之家,websocket创建简易聊天室



server.listen(3000, function listening() { console.log; 

js:

澳门游戏平台大全,关于WebSocket的详细操作,可前往w3c查看:webSocket

澳门游戏平台大全 1

首先下载websocket模块,命令行输入

服务端

node.js的 模块ws,可用于创建websocket服务,基本的express 和
http模块的使用

html:

搭建的服务我选择监听3000端口,

澳门游戏平台大全 2

wss.on('connection', function connection { console.log ws.on('message', function incoming { wss.clients.forEach { client.send('do you love me?'); }); });});
let socketServer = ws.Server;

let wss = new socketServer({port: 8090});    //创建websocketServer实例监听8090端口

let clients = [];                //创建客户端列表,用于保存客户端及相关连接信息
npm install ws
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <style>
        p {
            color: orange;
            padding: 5px 10px;
            margin: 0;
        }
        .user_msg {
            color: #ccc;
        }
        #messages {
            background: #000;
        }
    </style>
    <div class="vertical-center">
        <div class="container">
            <ul id="messages" class="list-unstyled"></ul>
            <hr/>
            <form role="form" id="chat_form" onsubmit="sendMessage(); return false;">
                <div class="form-group">
                    <input class="form-control" type="text" id="message" name="message"
                           placeholder="Type text to echo in here" value="" autofocus/>
                </div>
                <button type="button" id="send" class="btn btn-primary"
                        onclick="sendMessage();">
                    Send Message
                </button>

            </form>
            <div class="form-group">nikename:<input id="name" type="text" /> <button class="btn btn-sm btn-info" onclick="changName();">change</button></div>
        </div>
    </div>

最后客户端就简单了,web API 用于创建连接:new web;

//监听连接
wss.on('connection', function(ws) {
    let client_uuid = uuid.v4();
    let nickname = `AnonymousUser${clientIndex++}`;
    clients.push({
        "id": client_uuid,
        "ws": ws,
        "nickname": nickname
    });

    console.log(`client ${client_uuid} connected`);
    /**
     * 关闭服务,从客户端监听列表删除
     */
    function closeSocket() {
        for(let i = 0; i < clients.length; i++) {
          if(clients[i].id == client_uuid) {
            let disconnect_message = `${nickname} has disconnected`;
            broadcastSend("notification", disconnect_message, nickname);
            clients.splice(i, 1);
          }
        }
    }
    /*监听消息*/
    ws.on('message', function(message) {
        if(message.indexOf('/nick') === 0) {
            let nickname_array = message.split(' ');
            if(nickname_array.length >= 2) {
                let old_nickname = nickname;
                nickname = nickname_array[1];
                let nickname_message = `Client ${old_nickname} change to ${nickname}`;
                broadcastSend("nick_update", nickname_message, nickname);
            }
        } else {
            broadcastSend("message", message, nickname);
        }
    });
    /*监听断开连接*/
    ws.on('close', function() {
        closeSocket();
    })
})
var socket = `ws://localhost:3000`;var websocket = new WebSocket;
    //建立连接
        var ws = new WebSocket("ws://localhost:8090");
        var nickname = "";
        ws.onopen = function (e) {
            console.log('Connection to server opened');
        }
        //显示消息
        function appendLog(type, nickname, message) {
            if (typeof message == "undefined") return;
            var messages = document.getElementById('messages');
            var messageElem = document.createElement("li");
            var preface_label;
            var message_text;
            if (type === 'notification') {
                preface_label = `<i class="glyphicon glyphicon-plus"></i>`;
                message_text = `<p>${preface_label}&nbsp;&nbsp;${message}</p>`
            } else if (type == 'nick_update') {
                preface_label = `<i class="glyphicon glyphicon-bullhorn"></i>`;
                message_text = `<p>${preface_label}&nbsp;&nbsp;${message}</p>`
            } else {
                preface_label = `${nickname}`;
                message_text = `<p class="user_msg">${preface_label}&nbsp;&nbsp;${message}</p>`
            }
            messageElem.innerHTML = message_text;
            messages.appendChild(messageElem);
        }
        //收到消息处理
        ws.onmessage = function (e) {
            var data = JSON.parse(e.data);
            nickname = data.nickname;
            appendLog(data.type, data.nickname, data.message);
            console.log("ID: [%s] = %s", data.id, data.message);
        }
        //监听连接关闭情况
        ws.onclose = function (e) {
            appendLog("Connection closed");
            console.log("Connection closed");
        }
        //发送消息
        function sendMessage() {
            var messageField = document.getElementById('message');
            if (ws.readyState === WebSocket.OPEN) {
                ws.send(messageField.value);
            }
            messageField.value = '';
            messageField.focus();
        }
        //修改名称
        function changName() {
            var name = $("#name").val();
            if (ws.readyState === WebSocket.OPEN) {
                ws.send("/nick " + name);
            }
        }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

 

var express = require;var http = require;var WebSocket = require;var app = express();var server = http.createServer;var wss = new WebSocket.Server;

1.安装ws模块,uuid模块,ws是websocket模块,uuid是为了生成唯一id的模块

创建好服务之后,websocket 服务通过监听
message事件获取来自客户端的数据,然后我们可以给客户端发送一些消息。

客户端

let ws = require('ws');            //引入websocket模块
let uuid = require('uuid');        //引入创建唯一id模块

4.创建广播方法,用于向所有客户端推送消息

2.创建socketServer.js,引入相应模块

关于websocket的介绍太多,在这就不一一介绍了,本文主要实现通过websocket创建一个简易聊天室,就是90年代那种聊天室

5.开始监听端口以及数据

/**
 * 广播所有客户端消息
 * @param  {String} type     广播方式(admin为系统消息,user为用户消息)
 * @param  {String} message  消息
 * @param  {String} nickname 用户昵称,广播方式为admin时可以不存在
 */
function broadcastSend(type, message, nickname) {
    clients.forEach(function(v, i) {
        if(v.ws.readyState === ws.OPEN) {
            v.ws.send(JSON.stringify({
                "type": type,
                "nickname": nickname,
                "message": message
            }));
        }
    })
}

3.创建socket服务,创建客户端连接数组

websocket最主要的问题在于没有内置的分组功能和广播功能,需要程序员自己实现,理论上来说,构建好合适的分组结构,完全可以在网页上实现qq的功能

此时,我们的聊天室就已经完成了

标签:, , , , ,

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图